Google Maps | Zoom

The Zoom attribute is used to increase or decrease the zoom level on a specific point in maps. To customize the zoom level change the zoom value. The default value of zoom is 10.

Syntax:

var CustomOp = {
    zoom:zoom value
};

Example 1: This example sets the zoom level at 10.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Google Maps | Zoom
    </title>
  
    <!-- Loading map API -->
    <script src=
    </script>
         
    <script>
        function GFG() {
               
            var CustomOp = {
                center:new google.maps.LatLng(
                            28.502212, 77.405603), 
                zoom:10, 
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
               
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    </script>
</head>
  
<!-- load map -->
<body onload = "GFG()">
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>Google Maps</h3>
          
        <!-- Basic Container -->
        <div id = "DivID" style=
            "width:400px; height:300px;">
        </div>
    </center>
</body>
      
</html>

chevron_right


Output:

Example 2: This example sets the zoom level to 15.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Google Maps | Zoom
    </title>
  
    <!-- Loading map API -->
    <script src=
    </script>
         
    <script>
        function GFG() {
               
            var CustomOp = {
                center:new google.maps.LatLng(
                            28.502212, 77.405603), 
                zoom:15, 
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
               
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    </script>
</head>
  
<!-- load map -->
<body onload = "GFG()">
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>Google Maps</h3>
          
        <!-- Basic Container -->
        <div id = "DivID" style=
            "width:400px; height:300px;">
        </div>
    </center>
</body>
      
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.