Google Maps - Zoom

Aumentar / disminuir el valor de zoom

Puede aumentar o disminuir el valor de zoom de un mapa modificando el valor de la zoom atributo en las opciones del mapa.

Sintaxis

Podemos aumentar o disminuir el valor de zoom del mapa usando la opción de zoom. A continuación se muestra la sintaxis para cambiar el valor de zoom del mapa actual.

var mapOptions = {
   zoom:required zoom value
};

Ejemplo: Zoom 6

El siguiente código mostrará la hoja de ruta de la ciudad Vishakhapatnam con un valor 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>

Producirá la siguiente salida:

Ejemplo: Zoom 10

El siguiente código mostrará la hoja de ruta de la ciudad Vishakhapatnam con un valor 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>

Producirá la siguiente salida:

↰ Previous page Next page ↱