How to change the zoom level of Google maps programmatically?

Question

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?

Answer 1

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

Answer 2

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