Google Maps: tipos

En el capítulo anterior, discutimos cómo cargar un mapa básico. Aquí veremos cómo seleccionar un tipo de mapa requerido.

Tipos de mapas

Google Maps proporciona cuatro tipos de mapas. Ellos son -

ROADMAP- Este es el tipo predeterminado. Si no ha elegido ninguno de los tipos, se mostrará. Muestra la vista de la calle de la región seleccionada.
SATELLITE - Este es el tipo de mapa que muestra las imágenes de satélite de la región seleccionada.
HYBRID - Este tipo de mapa muestra las calles principales en imágenes de satélite.
TERRAIN - Este es el tipo de mapa que muestra el terreno y la vegetación.

Sintaxis

Para seleccionar uno de estos tipos de mapas, debe mencionar la identificación del tipo de mapa respectivo en las opciones de mapa como se muestra a continuación:

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

Mapa vial

El siguiente ejemplo muestra cómo seleccionar un mapa de tipo ROADMAP -

<!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:9,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

Satélite

El siguiente ejemplo muestra cómo seleccionar un mapa de tipo SATÉLITE -

<!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:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
		
   </head>
      
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

Híbrido

El siguiente ejemplo muestra cómo seleccionar un mapa de tipo HÍBRIDO -

<!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:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Producirá la siguiente salida:

Terreno

El siguiente ejemplo muestra cómo seleccionar un mapa de tipo TERRENO -

<!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:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Producirá la siguiente salida:

↰ Previous page Next page ↱