Google Maps - Tipi

Nel capitolo precedente, abbiamo discusso come caricare una mappa di base. Qui vedremo come selezionare un tipo di mappa richiesto.

Tipi di mappe

Google Maps fornisce quattro tipi di mappe. Sono -

ROADMAP- Questo è il tipo predefinito. Se non hai scelto nessuno dei tipi, questo verrà visualizzato. Mostra la vista stradale della regione selezionata.
SATELLITE - Questo è il tipo di mappa che mostra le immagini satellitari della regione selezionata.
HYBRID - Questo tipo di mappa mostra le strade principali sulle immagini satellitari.
TERRAIN - Questo è il tipo di mappa che mostra il terreno e la vegetazione

Sintassi

Per selezionare uno di questi tipi di mappa, devi menzionare il rispettivo id del tipo di mappa nelle opzioni della mappa come mostrato di seguito -

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

Roadmap

L'esempio seguente mostra come selezionare una mappa di 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>

Produrrà il seguente output:

Satellitare

L'esempio seguente mostra come selezionare una mappa di tipo SATELLITE -

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

Produrrà il seguente output:

Ibrido

L'esempio seguente mostra come selezionare una mappa di tipo HYBRID -

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

Produrrà il seguente output:

Terreno

L'esempio seguente mostra come selezionare una mappa di tipo TERRAIN -

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

Produrrà il seguente output: