React-leaflet: Using Google maps tiles

[adanielyan]

I tried to use this component with Google maps API for rendering Google maps tiles layer over the map (since you can't just use Google tiles directly bypassing their API), but couldn't make it work. Does anyone have a working example of using this component with Google maps' tiles? Any advice is appreciated.

[PaulLeCam]

Hi,

This is out of the scope of this library, as it only provides React bindings to Leaflet, not additional features.

I hope you'll have more luck with Leaflet documentation / plugins.

[stephanedaviet]

For those interesting in setting up react-leaflet with Google maps, you can write your custom component inspired by the one described below, based on leaflet-plugin by @shramov and google-maps by @Carrooi:

import 'leaflet-plugins/layer/tile/Google';

import L from 'leaflet';
import MapLayer from 'react-leaflet/lib/MapLayer';
import GoogleMapsLoader from 'google-maps';

// Inspired by TileLayer
// TODO: See how it works if there is multiple instances of this component in the app
// TODO: See how it works if Google maps API is loaded elsewhere
// (this should be handled by google-maps library)
export default class GoogleLayer extends MapLayer {

  componentWillMount() {
    super.componentWillMount();

    // Flag to know if the component should be rendered
    this.state = {
      googleLoaded: false
    };

    // This is a blank layer because MapLayer doesn't support having this undefined
    this.leafletElement = L.tileLayer('');

    // Google settings
    GoogleMapsLoader.LANGUAGE = 'fr';
    GoogleMapsLoader.LANGUAGE = 'FR';
    GoogleMapsLoader.KEY = '<your-google-api-key>';

    // Async loading of Google maps API to avoid direct script tag in HTML and
    // be more compliant to React component approach
    GoogleMapsLoader.load(() => {
      // Remove the previously added blank layer, add your Google layer(s) and flag loaded
      const GoogleLayer = new L.Google('ROADMAP');
      this.props.layerContainer.removeLayer(this.leafletElement);
      this.leafletElement = GoogleLayer;
      this.props.layerContainer.addLayer(this.leafletElement);
      this.setState({
        googleLoaded: true
      });
    });
  }

  componentWillUnmount() {
    super.componentWillMount();

    // Unload on umount, perhaps not necessary but seems a good practice
    GoogleMapsLoader.release(() => {
      this.setState = {
        googleLoaded: false
      };
    });
  }

  shouldComponentUpdate() {
    return super.shouldComponentUpdate()
        && this.state.googleLoaded;
  }

  render() {
    return null;
  }
}