Initial <StaticMap> implementation

[housseindjirdeh]

A basic, initial implementation of a StaticMap component for #480. Tested locally on a Next.js site:

---

Handling Signatures

Note: This also supports signed URLs, but curious to know if this approach looks correct. Since this is all constructed client-side, I included an optional signature prop. For support in SSR frameworks like Next.js, we may want to include some documentation to show how to construct a signature server-side in a route handler or server action.

For example, something like:

// Next.js
// /app/api/signature.js

import { NextResponse } from 'next/server';
import { createSignature } from '@googlemaps/url-signature';

export async function POST(request) {
  try {
    const { mapOptions } = await request.json(); // Get map parameters from the request

    let pathAndQuery = '/maps/api/staticmap';
    pathAndQuery += new URLSearchParams(mapOptions).toString(); // Add map options

   const signature = createSignature(pathAndQuery, process.env.GOOGLE_MAPS_SIGNING_SECRET);

    return NextResponse.json({ signedUrl });
  } catch (error) {
    return NextResponse.json({ error: "Failed to generate signature" }, { status: 500 });
  }
}

And then the signature can be passed down client-side:

'use client';

import { useState, useEffect } from 'react';
import { APIProvider, StaticMap } from 'react-google-maps';

export function GoogleMaps({ center, zoom, size, maptype }) {
  const [signature, setSignature] = useState(null);

  useEffect(() => {
    const getSignature = async () => {
      try {
        const mapOptions = {
          center: `${center.lat},${center.lng}`, 
          zoom,
          size,
          maptype
        };

        const response = await fetch('/api/signature', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ mapOptions })
        });

        const data = await response.json();
        setSignature(data.signature); 
      } catch (error) {
        console.error("Error fetching signature:", error);
      }
    };

    getSignature();
  }, [center, zoom, size, maptype]);

  if (!signature) {
    return <div>Loading map...</div>; 
  }

  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
      <StaticMap 
        defaultCenter={center} 
        zoom={zoom} 
        size={size}
        maptype={maptype}
        signature={signature} 
      />
    </APIProvider>
  );
}