Let's discuss implementing Google Maps with Gatsby.

Install

npm i --save google-map-react

Implementation

GoogleMaps.jsx

import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';

import GoogleMapReact from 'google-map-react';

const Marker = () => (
    <>
        <div className="pin" />
        <div className="pulse" />
    </>
);

const GoogleMaps = () => {
    const data = useStaticQuery(graphql`
        query {
            site {
                siteMetadata {
                    other {
                        googleMapsKey
                    }
                }
            }
        }
    `);
    const { googleMapsKey } = data.site.siteMetadata.other;

    const mapConfig = {
        center: {
            lat: 40.757,
            lng: -73.99,
        },
        zoom: 11,
    };

    return (
        <div id="google-map-section" style={{ height: '100vh', width: '100%' }}>
            <GoogleMapReact
                bootstrapURLKeys={{ key: googleMapsKey }}
                defaultCenter={mapConfig.center}
                defaultZoom={mapConfig.zoom}
            >
                <Marker lat={mapConfig.center.lat} lng={mapConfig.center.lng} />
            </GoogleMapReact>
        </div>
    );
};

export default GoogleMaps;