English 中文(简体)
Google Maps Tutorial

Google Maps Resources

Selected Reading

Google Maps - Zoom
  • 时间：2025-02-05

Google Maps - Zoom

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.

<!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()">
      <span id = "sample" style = "width:587px; height:400px;"></span>
   </body>
   
</html>

It will produce the following output −