CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Calou
Calou

Reputation: 333

Zoom and center a Google Map according to its markers (JavaScript API V3)

I think the title is enough, I don't even see how to do this for the V2 and V1 API :/

Thanks :)

Upvotes: 33

Views: 46380

Answers (4)

S.Elavarasan
S.Elavarasan

Reputation: 83

Center Zoom Depends On Single Marker

var myCenter=new google.maps.LatLng(38.8106813,-89.9600172);
var map;
var marker;
var mapProp;
function initialize()
{
    mapProp = {
        center:myCenter,
        zoom:8,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    map=new google.maps.Map(document.getElementById("map"),mapProp);

    marker=new google.maps.Marker({
        position:myCenter,
        animation:google.maps.Animation.BOUNCE,
        title:"400 St. Louis Street Edwardsville, IL 62025"
    });

    marker.setMap(map);
    google.maps.event.addListener(map, "zoom_changed", function() {
        map.setCenter(myCenter);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Daniel Vassallo
Daniel Vassallo

Reputation: 344251

As the other answers suggested, the fitBounds() method should do the trick.

Consider the following example, which will generate 10 random points on the North East USA, and applies the fitBounds() method:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps LatLngBounds.extend() Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.TERRAIN
   });

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

   var randomPoint, i;

   for (i = 0; i < 10; i++) {
     // Generate 10 random points within North East USA
     randomPoint = new google.maps.LatLng( 39.00 + (Math.random() - 0.5) * 20, 
                                          -77.00 + (Math.random() - 0.5) * 20);

     // Draw a marker for each random point
     new google.maps.Marker({
       position: randomPoint, 
       map: map
     });

     // Extend markerBounds with each random point.
     markerBounds.extend(randomPoint);
   }

   // At the end markerBounds will be the smallest bounding box to contain
   // our 10 random points

   // Finally we can call the Map.fitBounds() method to set the map to fit
   // our markerBounds
   map.fitBounds(markerBounds);

   </script> 
</body> 
</html>

Refreshing this example many times, no marker ever goes outside the viewport:

fitBounds demo

Upvotes: 80

Nicolas78
Nicolas78

Reputation: 5144

Computing the right zoom to show all your markers isn't trivial. But there's a function for that: GMap.fitBounds() - you define a bound (for example, the most extreme points of all your marker coordinates) and it sets the map accordingly. See e.g. fitbounds() in Google maps api V3 does not fit bounds (the answer!) for a good example.

Upvotes: 0

Klark
Klark

Reputation: 8280

Here is the way:

map.fitBounds(bounds);
map.setCenter(bounds.getCenter());

bounds is an array of the coordinates (markers). Every time when you place marker do something like:

bounds.extend(currLatLng);

Upvotes: 8

Related Questions