Sometimes, we want to center and zoom on displayed markers with Google Map API v3.
In this article, we’ll look at how to center and zoom on displayed markers with Google Map API v3.
How to center and zoom on displayed markers with Google Map API v3?
To center and zoom on displayed markers with Google Map API v3, we call the setCenter and fitBounds methods.
For instance, we write
const bounds = markers.reduce((bounds, marker) => {
return bounds.extend(marker.getPosition());
}, new google.maps.LatLngBounds());
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
to create the bounds with the marker location.
Then we call setCenter to center the map at the center of the bounds.
And then we call fitBounds to fit the map to the bounds.
Conclusion
To center and zoom on displayed markers with Google Map API v3, we call the setCenter and fitBounds methods.
