title: react-google-maps: how to use fitBounds, panBy, panTo, panToBounds public APIs?
body: <p>According to the <a href="https://github.com/tomchentw/react-google-maps/blob/master/src/lib/GoogleMap.js#L125-L131" rel="nofollow noreferrer">React Google Maps library</a>, you can call these four methods from the ref object.</p>
  
  <p>What seems weird, is that these methods are supposed to receive two parameters, a map instance and other arguments, like so:</p>
  
  <pre><code>fitBounds(map, args) { return map.fitBounds(...args); }
  </code></pre>
  
  <p>However, when calling fitBounds() this way, nothing happens on the map, no bounds are changed and no errors are thrown. This is the way I have structured the component, calling fitBounds in componentDidUpdate:</p>
  
  <pre><code>import React from 'react'
  import { withGoogleMap, GoogleMap, InfoWindow, Marker, OverlayView } from 'react-google-maps'
  import InfoBox from 'react-google-maps/lib/addons/InfoBox'
  import map from 'lodash/map'
  
  // Higher-Order Component
  const AllocatedPlacesMap = withGoogleMap(props =&gt; (
    &lt;GoogleMap
      center={props.center}
      defaultZoom={4}
      options={{ scrollwheel: false, minZoom: 3, maxZoom: 15 }}
      onCenterChanged={props.onCenterChanged}
      ref={props.onMapMounted}&gt;
      {props.markers.map((marker, index) =&gt; (
        &lt;Marker
          key={index}
          position={marker.position}
        /&gt;
      ))}
    &lt;/GoogleMap&gt;
  ));
  
  class Map extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }
  
    getCenter = () =&gt; {
      this._bounds = new google.maps.LatLngBounds();
  
      this.props.markers.forEach((marker, index) =&gt; {
        const position = new google.maps.LatLng(marker.lat, marker.lng);
        this._bounds.extend(position);
      });
  
      return this._bounds.getCenter();
    }
  
    componentDidUpdate() {
      this._map.fitBounds(this._map, this._bounds);
    }
  
    handleMapMounted = (map) =&gt; {
      this._map = map;
    }
  
    render() {
      return (
        &lt;div className="allocated-places"&gt;
          &lt;AllocatedPlacesMap
            containerElement={
              &lt;div style={{ height: `100%` }} /&gt;
            }
            mapElement={
              &lt;div style={{ height: `100%` }} /&gt;
            }
            center={this.getCenter()}
            markers={props.markers}
            onMapMounted={this.handleMapMounted}
          /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Map;
  </code></pre>
  
  <p>Any idea of what is the correct way to call fitBounds() in this case? documentation and examples seem to be lacking in this regard.</p>