react-google-layer-leaflet

A React component to implement Google Map tile layers on a Leaflet map. And a helper utility to lazily load the Google Maps Api.

NB: This package is still in alpha and not ready for use

Installation

Using yarn

yarn add react-google-layer-leaflet

or with NPM

 npm install react-google-layer-leaflet 

Motivation

There are a number of options for adding a google maps layer to leaflet. However most of them are un-maintained and no longer compatible with react-leaflet v3.x. If you want you could use react-leaflet-google-layer. react-google-layer-leaflet does two things differently and its really preference which should decide between the two. 1. Completely decoupling how the Google Maps JS API is loaded. 2. Being a simple wrapper for L.GridLayer.GoogleMutant and nothing else.

Basic Usage

import React, { useEffect } from 'react'
import { MapContainer } from 'react-leaflet'
import GoogleLayer, { googleMapsApiLoader } from 'react-google-layer-leaflet'

const position = [51.505, -0.09]

function MyMap(){

useEffect(() => {
  // call this anytime after app start up. 
  googleMapsApiLoader({
    apiKey: 'YOUR_API_KEY,
    version: '3.43', // of the api to use. 3.43 was the latest at time of writing 
    id: 'google-maps-api', // ensures calling it multiple times will not load multiple script tags
  })
},[])


return (
  <MapContainer center={position} zoom={13} >
    <GoogleLayer type="satellite" />

    <Marker position={position}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>
)
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Sean Rennie 💻

This project follows the all-contributors specification. Contributions of any kind welcome!