Google scaling to match all markers on this page

Question

im having difficulty with this, I looked at examples here and on the internet, but still couldn't get it to work. I have a Google v3 map that displays a number of markers across the UK. I'd like to set the zoom level to cover all the markers in the selected area, for example. London may have 50 markers, but in Glasgow there may be 2 ... with the same zoom level for both, it will be a little strange on a page in Glasgow. I read a little about the getBounds () method, but I'm not sure where and how to implement it in my script. Any help would be greatly 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

Use LatLngBounds .extend () and Map .fitBounds (). Below the fullBounds rectangle will expand to include your markers when they are created. Then just place the map in this 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);