Google-map-react: Can't dynamically adjust map zoom level to display all markers

[zander312]

Is there no way to do this. Do I need to write custom code to determine the zoom level based upon the distance between my map markers?

[istarkov]

read docs, use search.

[ozziexsh]

@zander312 I was running into this same issue but couldn't find it in the docs or any direct answer in the issues so I just used the internal google api:

...

_onMapLoaded({map, maps}) {
  const bounds = new google.maps.LatLngBounds();

  this.props.sites
    .filter(site => site.latitude !== undefined && site.longitude !== undefined)
    .forEach(site => {
      bounds.extend(new google.maps.LatLng(site.latitude, site.longitude));
    });

  map.fitBounds(bounds);
}

render() {

  ...

  return (
    <GoogleMapReact
      ...
      onGoogleApiLoaded={this._onMapLoaded}
      >
      {points}
      </GoogleMapReact>
  );
}

...

@istarkov maybe it could be more apparent somewhere how the component is fit to handle this? I saw the fitBounds utility function but it seems like you need to know the ne/sw and the size of the map itself in order to make use of it which doesn't work in my dynamic points / map size implementation.

[istarkov]

What the problem to calculate nw se of multiple points? It's the same as finding min max of array, are you developers or what?