Google API v3 fit map zoom and bounds to all markers

Question

I have been working on this for a while and am trying to implement latlngbounds to fit all the pins in the map canvas dynamically. But its not working. If someone has done sth similar to my code, can anyone guide me in the right path?

var geocoder; 
var map; 
function initializeMap() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(39.88445,-86.11084); 
    var myOptions = { 
      zoom: 9, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
        myOptions); 
} 
function codeAddress() { 
    var bound = new google.maps.LatLngBounds(); 
    var markers = new Array(); 
    var infowindow = new google.maps.InfoWindow({});  
    $('.LocAddHidden').each(function(index) { 
        var addy = $(this).text(); 
        geocoder.geocode( { 'address': addy}, function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK)  
            { 
                map.setCenter(results[0].geometry.location); 
                var marker = new google.maps.Marker({ 
                position: results[0].geometry.location, 
                map: map,                
                title:addy       
                });      
            }  
        }); 
    }); 
} 

  $(document).ready(function(){ 
    initializeMap(); 
    codeAddress();    
  for(var i in markers) 
  { 
    bound.extend(markers[i].getPosition()); 
  } 
  map.fitBounds(bound); 
});                           

Answer 1

For IE8 to work..

Instead of using: for(var i in markersArray)

Use this: for (i = 0; i < markersArray.length; i++)

Answer 2

The main problem is that you're extending the bounds in an empty loop. I don't see where you're adding anything to the markers array you create at the start of codeAddress(). You should be adding the marker you create in the geocode request.

But instead of adding it to a markers array in one loop, then extending the bounds in another loop, you could get rid of the 2nd loop and just extend the bounds in the first loop.

And you don't need to recenter the map every loop iteration. Setting the bounds at the very end takes care of recentering and zooming.

And Cheery pointed out another problem about variable scope.

Answer 3

After several attempts, I have something simple and practical:

function simulateBounds() {

    var bounds = new google.maps.LatLngBounds;

    for (var i = 0; i < arrayChinchetas.length; i++) {
        bounds.extend(arrayChinchetas[i].getPosition());
    }

    SurOeste = bounds.getSouthWest();
    NorEste = bounds.getNorthEast();

    //Constructs a rectangle from the points at its south-west and north-east corners.
    var latlandBounds = new google.maps.LatLngBounds(SurOeste, NorEste);

    map.fitBounds(latlandBounds);

}

Answer 4

You'll need to declare the markers array in your code, and push each created marker into that array

// global
var markers = [];

// after created
markers.push(marker);