CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Aquarius_Girl
Aquarius_Girl

Reputation: 22906

How to change the zoom level of Google maps programmatically?

function displayMapAndClick ()
    {
        var latlng    = new google.maps.LatLng (29.0167, 77.3833);
        var myOptions = 
        {
            zoom:zm,
            center:latlng,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map (document.getElementById ("map"), myOptions);
        directionsDisplay.setMap (map); 
    }

Where zm is a global variable set to default 7.

Now, I wish to change the zoom level of this map thorough this program.

What is the way to do that without re-initializing the map, or is re-initializing the map compulsory?

Upvotes: 33

Views: 71047

Answers (2)

publicJorn
publicJorn

Reputation: 2494

In addition to Alexanders' sollution: I had the same problem, but the above didn't work for me in all browsers because sometimes the map.setZoom() is executed before the map is done loading.

Wrapping the function like this will make it work always:

...
map = new google.maps.Map(..., mapOptions);
/* Change zoom level to 12  */
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
  map.setZoom(12);
});

Upvotes: 18

Alexander
Alexander

Reputation: 23537

Use the setZoom() method from the google.maps.Map class.

var mapOptions = {
  /* Initial zoom level */
  zoom: 8
  ...
};
map = new google.maps.Map(..., mapOptions);
/* Change zoom level to 12  */
map.setZoom(12);

Upvotes: 70

Related Questions