@entur/react-leaflet-google

Most recently tested with Leaflet React-Leaflet 4.0.0. Requires React 18, react-leaflet 4 and Leaflet 1.8-

GoogleMaps layer as React component for Leaflet build on top of React-Leaflet.

The google maps layer is using the plugin from Leaflet. GridLayer. GoogleMutant

Also it uses google-maps, a wrapper for asynchronously download Google Maps API in the browser.

Complete example with react-leaflet

To get started, to be able to run the example you have execute:

1npm install

1import React from 'react';
2import { MapContainer, TileLayer, LayersControl } from 'react-leaflet'
3import { GoogleLayer } from '../src'
4const { BaseLayer } = LayersControl;
5const key = 'your key goes here';
6const terrain = 'TERRAIN';
7const road = 'ROADMAP';
8const satellite = 'SATELLITE';
9const hydrid = 'HYBRID';
10//// Google's map type. Valid values are 'roadmap', 'satellite' or 'terrain'. 'hybrid' is not really supported.
11
12export default class GoogleExample extends React.Component {
13
14  constructor() {
15    super();
16  }
17
18  render() {
19    return (
20      <MapContainer center={[42.09618442380296, -71.5045166015625]} zoom={2} zoomControl={true}>
21        <LayersControl position='topright'>
22          <BaseLayer  name='OpenStreetMap.Mapnik'>
23            <TileLayer  url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"/>
24          </BaseLayer>
25         <BaseLayer checked name='Google Maps Roads'>
26            <GoogleLayer googlekey={key}  maptype={road} />
27          </BaseLayer>
28         <BaseLayer  name='Google Maps Terrain'>
29            <GoogleLayer googlekey={key}  maptype={terrain} />
30          </BaseLayer>
31           <BaseLayer  name='Google Maps Satellite'>
32            <GoogleLayer googlekey={key}  maptype={satellite} />
33          </BaseLayer>
34            <BaseLayer  name='Google Maps Hydrid'>
35            <GoogleLayer googlekey={key}  maptype={hydrid}  libraries={['geometry', 'places']} />
36          </BaseLayer>  
37          <BaseLayer  name='Google Maps with Libraries'>
38            <GoogleLayer googlekey={key}  maptype={hydrid}  libraries={['geometry', 'places']} />
39          </BaseLayer>        
40        </LayersControl>
41      </MapContainer>
42    )
43  }
44}
45

You can find the following example in the folder example . Run the above code by executing the following scripts in package.json, with the order they are stated underneath:

1undefined

1. `example`