react-google-maps

React components library for google maps.

Library is under active development. It is not recomended for production usage so far.

1import {GoogleApiProvider, Map, Marker} from 'react-google-maps-ts';
2
3const App = () => (
4  <GoogleApiProvider
5    apiKey="<API_KEY>"
6  >
7    <MyAwesomeApp />
8  </GoogleApiProvider>
9);
10
11const geoPoint = {lat: 50, lng: 50};
12
13const MyAwesomeApp = () => (
14  <Map
15    defaultCenter={geoPoint}
16  >
17    <Marker 
18      position={geoPoint}
19      zoom={8}
20      title="My perfect marker"
21    />
22  </Map>
23);

Implemented features:

• Marker
• Polygon
• Polyline
• Circle
• Rectangle
• TilesOverlay (MapType)
• DomOverlay (OverlayView)
• GroundOverlay
• InfoWindow

GoogleMapsProvider

Common API loading

1import {GoogleApiProvider} from 'react-google-maps-ts';
2
3const App = () => (
4  <GoogleApiProvider
5    apiKey="<API_KEY>"
6    geometry // include geometry library
7    drawing // include drawing library
8    places // include places library
9    visualization // include visualization library
10    language='en' // Google Maps localization
11    region='GB'
12    version='quarterly' // Google Maps versioning
13  >
14    <MyAwesomeApp />
15  </GoogleApiProvider>
16);

Proxy API loading

You can load Google API using your own proxy

1import {GoogleApiProvider} from 'react-google-maps-ts';
2
3const App = () => (
4  <GoogleApiProvider
5    proxy='<Your proxy URL>'
6  >
7    <MyAwesomeApp />
8  </GoogleApiProvider>
9);

Custom loading callback

You can load Google API using your own loading method

1import {GoogleApiProvider} from 'react-google-maps-ts';
2
3const load = async (): Promise<GoogleObject> => {
4  // implementation
5
6  return googleApi;
7}
8
9const App = () => (
10  <GoogleApiProvider
11    load={load}
12  >
13    <MyAwesomeApp />
14  </GoogleApiProvider>
15);

Extending library with you own classes

You can extend Google API with your custom objects

1import {GoogleApiProvider} from 'react-google-maps-ts';
2
3const extend = async (google: Google): void => {
4  google["<your namespace>"] = // your extension;
5}
6
7const App = () => (
8  <GoogleApiProvider
9    apiKey="<API_KEY>"
10    extend={extend}
11  >
12    <MyAwesomeApp />
13  </GoogleApiProvider>
14);

Smart vs Dumb components

Main purpose of this library is combining of declarative React syntax with free accessibility to Google Maps objects without doubtful workarounds.

Each component has smart and dumb implementations.

Smart components

Smart components are self-contained. They have their own encapsulated Google Maps objects and you can't access them. But they are extremely simple to use and their intarfaces are similar to corresponding Google Maps object.

1import {Map, Marker} from 'react-google-maps-ts';
2
3const geoPoint = {lat: 50, lng: 50};
4
5const MyAwesomeApp = () => (
6  <Map
7    defaultCenter={geoPoint}
8  >
9    <Marker 
10      position={geoPoint}
11      zoom={8}
12      title="My perfect marker"
13    />
14  </Map>
15);

Dumb components

Dumb components use Google Maps objects from external context. So you can access it if you need.

1import {DumbMap, withSmartMapCtx, MapService, useGoogleCtx} from 'react-google-maps-ts';
2
3interface AwesomeAppProps {
4  ...
5};
6
7const geoPoint = {lat: 50, lng: 50};
8
9const MyAwesomeApp = (
10  {mapService}: AwesomeAppProps & {mapService: MapService | undefined}
11) => {  
12  const googleApi = useGoogleCtx();
13
14  const centerMap = () => { 
15    // Notice that such approach creates new function on each render
16    // It is provided only as example. It is recomended to avoid it.
17
18    if (!mapService || !googleApi) return;
19
20    const {object} = mapService; // Google Maps object;
21
22    const defaultCenter = new googleApi.maps.LatLng(geoPoint.lat, geoPoint.lng);
23
24    object.setCenter(defaultCenter);
25  }
26
27  return (
28    <>
29      <button onClick={centerMap}>Center map</button>
30      <DumbMap
31        defaultCenter={geoPoint}
32      />
33    </>
34  );
35}
36
37withSmartMapCtx<AwesomeAppProps>(MyAwesomeApp);