Google Maps - Zoom

Advertisements

Previous Page
Next Page  

Increase/Decrease the Zoom Value

You can increase or decrease the zoom value of a map by modifying the value of the zoom attribute in the the map options.

Syntax

We can increase or decrease the zoom value of the map using the zoom option. Given below is the syntax to change the zoom value of the current map.

var mapOptions = {
   zoom:required zoom value
};

Example : Zoom 6

The following code will display the roadmap of the city Vishakhapatnam with a zoom value of 6.

Live Demo 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

It will produce the following output −

Example : Zoom 10

The following code will display the roadmap of the city Vishakhapatnam with a zoom value of 10.

Live Demo 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

It will produce the following output −

Advertisements