Gatsby Google Maps
by John Vincent
Posted on September 20, 2019
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;
Gatsby
- Gatsby and Client Only Components
- Gatsby Getting Started
- Gatsby Google Analytics
- Gatsby Google Maps
- Gatsby Helmet
- Gatsby Manifest
- Gatsby Markdown
- Gatsby Overview of johnvincent.io
- Gatsby React Icons
- Gatsby Robots file
- Gatsby RSS Feed
- Gatsby Sass
- Gatsby Sitemap
- Gatsby Webpack Bundle Analyzer
- Migration of johnvincent.io to Next.js from Gatsby
- Overview of port to Next.js from Gatsby