fitBounds() shows whole earth (if map is first hidden and then shown)

fitbounds, google-maps, google-maps-api-3, javascript

Solution

Solved (not in a nice way, though). What I ended up doing was initialising the `LatLngBounds` with the points when loading the page, but panning and zooming only when showing the map. In this way it works correctly. E.g.

var box;
function init(){
  var opt = {
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"),opt);
  box = new google.maps.LatLngBounds();
  for(var i=0;i<list.length;i++){
      var p = new google.maps.LatLng(list[i].lat,list[i].lon);
      var marker = new google.maps.Marker({
          position: p,
          map: map
      });
      box.extend(p);
  }
}

and then, later (click on a button for example)

function showMap(){
  $('#map').show(function(){
    google.maps.event.trigger(map, 'resize');
    map.fitBounds(box);
    map.panToBounds(box);
  });
}

It works, but I don't like to have that global var hanging around. I implement the exact same behavior using OpenLayers, and it works correctly without the need for this hack. If anybody has a better solution, please post it and I will accept it if it works.

Thanks to @Engineer and @Matt Handy for helping me eliminate one possible source of errors.

Problem

I have a bunch or markers, and I want to show only the area containing them. I found a long list of similar questions (see at the bottom of the post for some), but none of the solutions works for me. The LatLngBounds is built correctly, but when I call fitBounds the result will be the following: Instead of: Can anybody spot an evident error in my code? ``` var opt = { zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"),opt); var box = new google.maps.LatLngBounds(); for(var i=0;i<list.length;i++){ var p = new google.maps.LatLng(list[i].lat,list[i].lon); var marker = new google.maps.Marker({ position: p, map: map }); box.extend(p); } map.fitBounds(box); map.panToBounds(box); ``` Some of the posts I read and tried (list not comprehensive): - Google Maps v3 - Automating Zoom Level? - Google maps V3 custom marker images and fitBounds() - Google Maps with fitBounds don't zoom - fitbounds() in Google maps api V3 does not fit bounds Edit: this actually happens if (as I do in my application) the map is at first hidden, and showed only later. I hide it in this way: `$('#map').hide();` and show it: ``` $('#map').show(function(){ //this is necessary because otherwise //the map will show up in the upper left corner //until a window resize takes place google.maps.event.trigger(map, 'resize'); }); ``` Any clue as to why this happens and how to prevent it (apart from initialising the map when first shown)? On a side note, if I set zoom and center when declaring the map object (i.e. I don't use `fitBounds()`) then the map will show correctly, even after a hide/show. I can't set zoom and center, though, because the list of points is retrieved elsewhere and I don't know where they are beforehand.

Original source

Related problems