Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I have a problem with googlemaps fitBounds functions.
for (var i = 0; i < countries.length; i++) {
var country = countries[i];
var latlng = new google.maps.LatLng(parseFloat(country.lat), parseFloat(country.lng));
mapBounds.extend(latlng);
map.fitBounds(mapBounds);
Some icons will be displayed outside the viewport / Visible area.
And idea?
Thanks in advance.
Consider the following example, which will generate 10 random points on the North East USA, and applies the fitBounds() method.
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps LatLngBounds.extend() Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN
var markerBounds = new google.maps.LatLngBounds();
var randomPoint, i;
for (i = 0; i < 10; i++) {
// Generate 10 random points within North East USA
randomPoint = new google.maps.LatLng( 39.00 + (Math.random() - 0.5) * 20,
-77.00 + (Math.random() - 0.5) * 20);
// Draw a marker for each random point
new google.maps.Marker({
position: randomPoint,
map: map
// Extend markerBounds with each random point.
markerBounds.extend(randomPoint);
// At the end markerBounds will be the smallest bounding box to contain
// our 10 random points
// Finally we can call the Map.fitBounds() method to set the map to fit
// our markerBounds
map.fitBounds(markerBounds);
</script>
</body>
</html>
Refreshing this example many times, no marker ever goes outside the viewport. At most, sometimes a marker is slightly clipped from the top when hidden behind the controls:
You may also be interested in checking out the following Stack Overflow posts on the topic:
fitbounds() in Google maps api V3 does not fit bounds
Google Maps v3 - Automating Zoom Level?
Show us a link to the patient. How many countries do you have in the countries array? The entire world? Are your bounds crossing the anti-meridian?
country.lat and country.lng are one point per country, and that's not enough to define the bounding box of the country. Is that some sort of "country centroid"?
If that's the case, and if you have markers east of the centroid of the easternmost country, or to the west of the centroid of the westermost country, those markers will, of course, fall outside the bounds that you're defining.
The map.fitBounds() method works fine. :-)
Marcelo.
It seems that the result of fitBounds() is depending on the minZoom value.
For my use-case I managed to recenter the view to cover all the markers by using: map.setCenter(bounds.getCenter());
zoomToAllMarkers() {
if (!this.mapMarkers.length) {
return;
let bounds = new google.maps.LatLngBounds();
for (let i = 0; i < this.mapMarkers.length; i++) {
bounds.extend(this.mapMarkers[i].getPosition());
this.map.setCenter(bounds.getCenter());
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
