@reactsg/googlemaps
v24.7.10
Published
React.js Google Maps
Downloads
58
Maintainers
Keywords
Readme
@reactsg/googlemaps
@reactsg/googlemaps
This library requires React v16.6 or later. To use the latest features (including hooks) requires React v16.8+. If you need support for earlier versions of React, you should check out react-google-maps
This is complete re-write of the (sadly unmaintained) react-google-maps
library. We thank tomchentw for his great work that made possible.
@reactsg/googlemaps provides very simple bindings to the google maps api and lets you use it in your app as React components.
Here are the main additions to react-google-maps that were the motivation behind this re-write
Install @reactsg/googlemaps
with NPM
$ npm i @reactsg/googlemaps
<!-- or -->
$ yarn add @reactsg/googlemaps
import React from 'react';
import { GoogleMap, useJsApiLoader } from '@reactsg/googlemaps';
const containerStyle = {
width: '400px',
height: '400px',
};
const center = {
lat: -3.745,
lng: -38.523,
};
function MyComponent() {
const { isLoaded } = useJsApiLoader({
id: 'google-map-script',
googleMapsApiKey: 'YOUR_API_KEY',
});
const [map, setMap] = React.useState(null);
const onLoad = React.useCallback(function callback(map) {
// This is just an example of getting and using the map instance!!! don't just blindly copy!
const bounds = new window.google.maps.LatLngBounds(center);
map.fitBounds(bounds);
setMap(map);
}, []);
const onUnmount = React.useCallback(function callback(map) {
setMap(null);
}, []);
return isLoaded ? (
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
onLoad={onLoad}
onUnmount={onUnmount}
>
{/* Child components, such as markers, info windows, etc. */}
<></>
</GoogleMap>
) : (
<></>
);
}
export default React.memo(MyComponent);
Migration from [email protected]
if you need an access to map object, instead of ref
prop, you need to use onLoad
callback on <GoogleMap />
component.
Before:
// before - don't do this!
<GoogleMap
ref={map => {
const bounds = new window.google.maps.LatLngBounds();
map.fitBounds(bounds);
}}
/>
After:
<GoogleMap
onLoad={map => {
const bounds = new window.google.maps.LatLngBounds();
map.fitBounds(bounds);
}}
onUnmount={map => {
// do your stuff before map is unmounted
}}
/>
If you want to use window.google
object, you need to extract GoogleMap in separate module, so it is lazy executed then google-maps-api
script is loaded and executed by <LoadScript />
. If you try to use window.google
before it is loaded it will be undefined and you'll get a TypeError.
Main features
- Simplified API
- Uses the new Context API
- Supports async React (StrictMode compliant)
- Removes lodash dependency =>
smaller bundle size
12.4kb
gzip, tree-shakeable https://bundlephobia.com/result?p=@reactsg/googlemaps - forbids loading of Roboto fonts, if you set property preventGoogleFonts on
<LoadScript preventGoogleFonts />
component
Examples
Updating soon:
Advice
Using the examples requires you to generate a google maps api key. For instructions on how to do that please see the following guide