Google zooming to fit all markers on that page

Question

im having difficulties figuring this out, ive looked at examples here and on the internet but still cant manage to get it to work. I have a Google v3 map which displays a number of markers across the UK. Id like to be able to set the zoom level to cover all the markers in the area selected eg. London might have 50 markers and Glasgow may have 2...having the same zoom level for both would look slightly odd on the Glasgow page. I've read a little about the getBounds() method, but im not sure where and how to implemented it in my script. Any help would be appreciated. This is my code so far.

var gmarkers=[];
var map=null;

function initialize(){

var myOptions={

    zoom:10,<!--would this still be needed-->
    center:new google.maps.LatLng(parseFloat(gmapcentrelat),parseFloat(gmapcentrelong)),                                            mapTypeControl:true,
    mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl:true,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
        map=new google.maps.Map(document.getElementById("map_canvas"),
                                        myOptions);


        google.maps.event.addListener(map, 'click', function() {
        infowindow.close()

    });

        // Read the data from example.xml
        downloadUrl(gmapfile,function(doc){
        var xmlDoc=xmlParse(doc);
        var markers=xmlDoc.documentElement.getElementsByTagName("hotel");
        for(var i=0;i<markers.length;i++){

        // obtain the attribues of each marker
        var lat=parseFloat(markers[i].getAttribute("lat"));
        var long=parseFloat(markers[i].getAttribute("long"));
        var point=new google.maps.LatLng(lat,long);
        var star=(markers[i].getAttribute("star"));

        var star_html='';

        if(star>1)
                {star_html='<img src="" alt="star" /><br />'}

                var hotel_id=(markers[i].getAttribute("id"));
                var hotel_name=(markers[i].getElementsByTagName("given_name")[0].firstChild.nodeValue);
                var country=(markers[i].getAttribute("country_id"));
                var city=(markers[i].getAttribute("city_id"));
                var location=(markers[i].getAttribute("location"));
                var filetxt=(markers[i].getAttribute("file_name"));
                var countrytxt=(markers[i].getAttribute("country_name"));
                    countrytxt=countrytxt.toLowerCase();
                    countrytxt=countrytxt.replace(" ","_");
                var citytxt=(markers[i].getAttribute("city_name"));
                    citytxt=citytxt.toLowerCase();
                    citytxt=citytxt.replace(" ","_");

                var html='';

        // create the marker        
        var marker=createMarker(point,html,star,hotel_id)

    }
})
};

    var infowindow=new google.maps.InfoWindow(
{
        size:new google.maps.Size(150,50)
});

function myclick(i){
        google.maps.event.trigger(gmarkers[i],"click")
};

function createMarker(latlng,html,star,hotel_id){
    var contentString=html;
    var marker=new google.maps.Marker({
        position:latlng,
        map:map,

        icon:'http://'+servername+'hotels/graphics/red_'+star+'_star.png',
        zIndex:Math.round(latlng.lat()*-100000)<<5
        });

        google.maps.event.addListener(marker,'click',function(){
        infowindow.setContent(contentString);
        infowindow.open(map,marker)});
        gmarkers[hotel_id]=marker};

Answer 1

Make use of LatLngBounds.extend() and Map.fitBounds(). Below, the fullBounds rectangle will grow to include your markers as you create them. Then, simply fit the map to that rectangle when you are done creating your markers.

var fullBounds = new google.maps.LatLngBounds();

for(var i=0;i<markers.length;i++){
  var lat=parseFloat(markers[i].getAttribute("lat"));
  var long=parseFloat(markers[i].getAttribute("long"));
  var point=new google.maps.LatLng(lat,long);

  fullBounds.extend(point);

  ...

}

map.fitBounds(fullBounds);