Google Maps - Zoom

Augmenter / Diminuer la valeur du zoom

Vous pouvez augmenter ou diminuer la valeur de zoom d'une carte en modifiant la valeur de zoom attribut dans les options de la carte.

Syntaxe

Nous pouvons augmenter ou diminuer la valeur de zoom de la carte en utilisant l'option zoom. Vous trouverez ci-dessous la syntaxe pour modifier la valeur de zoom de la carte actuelle.

var mapOptions = {
   zoom:required zoom value
};

Exemple: Zoom 6

Le code suivant affichera la feuille de route de la ville de Vishakhapatnam avec une valeur de zoom de 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()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Exemple: Zoom 10

Le code suivant affichera la feuille de route de la ville de Vishakhapatnam avec une valeur de zoom de 10.

<!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>

Il produira la sortie suivante -