CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Kannan
Kannan

Reputation: 829

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

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);                
        } 
    }

Upvotes: 0

Views: 4016

Answers (2)

1Mayur
1Mayur

Reputation: 3485

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

Upvotes: 1

Chris
Chris

Reputation: 2646

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.

Upvotes: 2

Related Questions