Google-maps-react: How to call fitBounds() or center the map such that it shows all markers?

[anushreepatil]

[marikvntu]

Well I see it's quite empty here. So I'll respond with at least some suggestion(not the best but could help). Warning Typescript syntax! :)

So, use onReady attribute and in Map tag and define your callback there.

And for callback

fetchPlaces(mapProps, map)
{
var googleMap = window["google"];

    let bounds = GetOutletsBounds(mapProps.children); 
    let googleBounds = new googleMap.maps.LatLngBounds(bounds.SouthWest, bounds.NorthEast);
    map.fitBounds(googleBounds);
}

interface IMapPoint { lat: number, lng: number };

//TODO: use some less primitive function in the future
function GetOutletsBounds(outlets: Array): { SouthWest: IMapPoint, NorthEast: IMapPoint }
{
let south: number = -90;
let north: number = 90;
let west: number = 180;
let east: number = -180;

    outlets.forEach(outlet => {
        south = Math.max(south, outlet.props.position.lat);
        north = Math.min(north, outlet.props.position.lat);
        west = Math.min(west, outlet.props.position.lng);
        east = Math.max(east, outlet.props.position.lng);
    });

    return { SouthWest: { lat: south, lng: west }, NorthEast: { lat: north, lng: east } }
}

P.S. This is very "quick&dirty" solution, I'm sure you can find other approach or make it more elegant. As for the interface, it's optional in this case, you can get rid of it.

[natrey]

any updates on this issue?

[sheam]

@marikvntu Where did you find typescript definitions? Or did you make them yourself? Care to share?

[syberen]

I used this comment from a different package, and it appears to work fine:
https://github.com/tomchentw/react-google-maps/issues/305#issuecomment-352290795

Only difference for me was that I had to use the ".map" on the ref.
React version 15.6.2

componentDidUpdate() {
    const bounds = new window.google.maps.LatLngBounds()
    this.state.results.map((result) => {
        bounds.extend(new window.google.maps.LatLng(
        result.latitude,
        result.longitude
        ));
    });

    this.refs.resultMap.map.fitBounds(bounds)
}

<Map 
    google={this.props.google} 
    ref="resultMap"
    zoom={14}
    initialCenter={this.getCenter()}
    style={{
        position: 'static',
        width: '100%',
        height: '200px',
        marginBottom: '20px',
        border: '1px solid grey',
        boxSizing: 'border-box'
     }}
>
    {this.getMarkers()}                
</Map>

[tidyline]

I tried this way to auto-center and auto-zoom the map.
Use onReady in Map Component, and adjust the map based on the marker list.
How about try this ;)

const markerList = [{
  name : 'name',
  position  : {
    lat : 0,
    lng : 0
  }
}, ...]; // set of markers

adjustMap(mapProps, map) {
  const {google, markers} = mapProps;
  const bounds = new google.maps.LatLngBounds();

  markers.forEach(marker => {
    const {lat, lng} = marker.position;

    bounds.extend(new google.maps.LatLng(lat, lng));
  });

  map.fitBounds(bounds);
  // map.panToBounds(bounds);
}

<Map
  google={google}
  initialCenter={position}

  // like this ↓↓
  onReady={this.adjustMap}
>
  {markers.map(marker => <Marker />))}
</Map>