How to access google.maps.Map object with react-google-maps

Question

I have a pretty simple react application using https://github.com/tomchentw/react-google-maps but I'm having difficulty understanding how to get a reference to my current map or how to access the google.maps.Map object in a custom component.

I found this on the repo, but after reading through the posts I'm still a little confused.

I'm starting my application building off of the DirectionsRenderer example.

What I want to do next is add my own custom components for picking the starting point and using the Google Maps autocomplete API.

Yes, I know that the package has a component for that already, but I need to do a little more than just search for a location on the map.

In order to accomplish my needs I will do something like

const autocomplete = new google.maps.places.Autocomplete(node);
autocomplete.bindTo('bounds', map);

Where node is the element I'm binding the autocomplete functionality and map is an instance of the google.maps.Map object.

My application thus far:

App.jsx

const App = ({ store }) => (
  <Provider store={store}>
    <div>
      <Sidebar>
        <StartingPoint defaultText="Choose starting point&hellip;" />
      </Sidebar>
      <GoogleApiWrapper />
    </div>
  </Provider>
);

GoogleApiWrapper

const GoogleMapHOC = compose(
  withProps({
    googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=__GAPI_KEY',
    loadingElement: <div style={{ height: '100vw' }} />,
    containerElement: <div style={{ height: '100vh' }} />,
    mapElement: <div style={{ height: '100%' }} />,
  }),
  withScriptjs,
  withGoogleMap,
  lifecycle({
    componentDidMount() {
      const DirectionsService = new google.maps.DirectionsService();

      // make google object available to other components
      this.props.onLoad(google);

      DirectionsService.route({
        origin: new google.maps.LatLng(41.8507300, -87.6512600),
        destination: new google.maps.LatLng(41.8525800, -87.6514100),
        travelMode: google.maps.TravelMode.DRIVING,
      }, (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: result,
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      });
    },
  }),
)(props => (
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={13}
    defaultCenter={new google.maps.LatLng(37.771336, -122.446615)}
  >
    {props.directions && <DirectionsRenderer directions={props.directions} />}
  </GoogleMap>
));

If I'm unable to access the google.maps.Map object outside of the wrapper I would alternatively like to access a reference to the element that contains the map so that I may instantiate a new google.maps.Map(ref_to_elem, options);

Any help would be greatly appreciated!

Answer 1

import {GoogleMap, withGoogleMap} from 'react-google-maps';
import {MAP} from 'react-google-maps/lib/constants';

const MapComponent = withGoogleMap(() => (
 {/*Here you have access to google.maps.Map object*/}
     <GoogleMap ref={(map) => map.context[MAP]}/>
 ));


const Map = ({locations}) => (
  <MapComponentClass
    containerElement={MapComponent}
    mapElement={MapComponent}
    locations={locations}/>
);

export default Map;

Answer 2

Worth pointing out for anyone else googling this that nowdays, using react-google-maps you can simply use the useGoogleMap hook to get access to the Google maps instance

https://react-google-maps-api-docs.netlify.app/#map-instance

import React from 'react'
import { useGoogleMap } from '@react-google-maps/api'

function PanningComponent() {
  const map = useGoogleMap()

  React.useEffect(() => {
    if (map) {
      map.panTo(...)
    }
  }, [map])

  return null
}

Answer 3

You can do it by React refs:

<GoogleMap ref={(map) => this._map = map} />

function someFunc () { 
    //using, for example as:
    this._map.getCenter() 
    this._map.setZoom(your desired zoom);
}

Answer 4

What I did right now in my react-redux application is I assign global variable map outside of react comnponent GoogleMap:

/*global google*/

// your imports //

var map;

class GoogleMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // your states
    };
  }

  // your functions

  componentWillReceiveProps(nextProps) {

  }

  componentDidMount() {

    // code

    // render googlemap

    map = new google.maps.Map(this.refs.map, yourMapProps);

    // add click event listener to the map

    map.addListener('click', function(e) {
      //code
    });

    //viewport listener

    map.addListener('idle', function(){
      // code
    });
  }

  render() {
      return (
        <div id="map" ref="map">
          {places.map((place) => {
             return(<Marker place={place} key={place.key} map={map} />);
          })}
        </div>
  }
}

function mapDispatchToProps(dispatch) {
   //code
}

export default connect(mapDispatchToProps)(GoogleMap);

Pass map as props into Child Component:

/*global google*/

import React, { Component } from 'react';

class Marker extends Component {
  componentDidMount() {
    this.renderMarker();
  }

  renderMarker() {
    var { place, map } = this.props;
    place.setMap(map);
  }

  render() {
    return null;
  }
}

export default Marker;

I don't know is it good practice. Bu it works. I tried to find the solution how to avoid setting Map Object as global windows.map reading all this stuff about singletons and so on. And then this came to my head. Now if I type window.map in the browser concole I get div id="map"