Easily load and consume Google's Maps JavaScript API.
This library exports a Provider that will load the API for you and put it on the window. You'd probably want to use it somewhere around the root of your app, like so:
import { MapsProvider } from 'react-maps-loader';
import App from './App'; // your beautiful app!
const Root = () => (
<MapsProvider apiKey="YOUR_API_KEY" libraries={['places']}>
<App />
</MapsProvider>
);
Somewhere nested inside the App component, you may have consumers that get the google.maps prop like so:
import { MapsConsumer } from 'react-maps-loader';
import EmbeddedMap from './EmbeddedMap';
import MapContainer from './MapContainer';
const Map = ({ place }) => (
<MapsConsumer>
{maps =>
maps ? (
<EmbeddedMap
containerElement={<MapContainer />}
loadingElement={<div style={{ height: '100%' }} />}
mapElement={<div style={{ height: '100%' }} />}
place={place}
/>
) : (
<div>Loading!</div>
)
}
</MapsConsumer>
);