How to make google map 'fit to markers'? - google-maps

Question

I am using google-map-react to render maps in my react app.I am displaying dynamic number of markers on the map.I need to fit the view of map so that it just encloses all the markers.I went through this thread but found it a bit complicated.Can anyone please give me an overview of how this can be done?

Answer 1

It happens that I had to do the exact same thing recently. I found that existing libs were more getting on my way than actually helping so I just went with writing my own component.
In case you decide going the same way - here's how to do what you want:
First - you need to get the bounds object enclosing all your markers. Here we assume that this.state.markers contains an array of google.maps.Marker objects
Your component could have the following method to do that:
getObjectsBounds(){
let objectsBounds = new google.maps.LatLngBounds();
Object.values(this.state.markers).map((marker) => {
let lat = parseFloat(marker.getPosition().lat());
let long = parseFloat(marker.getPosition().lng());
let point = new google.maps.LatLng(lat, long);
objectsBounds.extend(point);
});
return objectsBounds;
}
Now we just use fitBounds on the above funtion's return results. Here we assume that this.map is your gmap, i.e. what google.maps.Map( ... your args ... ) returns.
fitBounds(){
let bounds = this.getObjectsBounds();
this.map.fitBounds(bounds);
}