How to show all the markers in google map on initial load? - google-maps

Question

I have developed a project which shows google map with multiple markers. My problem is that not all markers are shown on the initial load. ie. if i have four markers, only 2 are visible in the map when the map initially load.I have to zoom out to view the rest of the markers.
How can i solve the issue ?
Heres my code for getting Googlemap via javascript
window.onload=function(){
var mapOptions={
center:new google.maps.LatLng(markers[0].lat,markers[0].lng),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var infoWindow=new google.maps.InfoWindow();
var map=new google.maps.Map(document.getElementById("dvMap"),mapOptions);
var bounds=new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++){
var data=markers[i];
var latlng=new google.maps.LatLng(data.lat,data.lng);
var marker=new google.maps.Marker({
position:latlng,
map:map,
title:data.title
});
(function(marker,data){
google.maps.event.addListener(marker,"click",function(e){
infoWindow.setContent(data.description);
infoWindow.open(map,marker);
});
})(marker,data);
}
}

Answer 1

It's been a while since I did Google Maps API work but I believe what you need is this:
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
You already define the bounds array and loop your markers to just add each marker to the bounds array and then fitBounds.
See http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/ for the original article.

Answer 2

for(i=0;i<markers.length;i++){
var data=markers[i];
var latlng=new google.maps.LatLng(data.lat,data.lng);
var marker=new google.maps.Marker({
position:latlng,
map:map,
title:data.title
});
bounds.extend(marker); // here is the code to add every marker plotted on bounds
(function(marker,data){
google.maps.event.addListener(marker,"click",function(e){
infoWindow.setContent(data.description);
infoWindow.open(map,marker);
});
})(marker,data);
}
map.setCenter(latlngbounds.getCenter()); // this will set the center of map to center of all markers
map.fitBounds(latlngbounds); // this will fit all the markers to screen