Google Maps - Controlli dell'interfaccia utente

Google Maps fornisce un'interfaccia utente con vari controlli per consentire all'utente di interagire con la mappa. Possiamo aggiungere, personalizzare e disabilitare questi controlli.

Controlli predefiniti

Ecco un elenco dei controlli predefiniti forniti da Google Maps:

Zoom- Per aumentare e diminuire il livello di zoom della mappa, avremo un cursore con i pulsanti + e -, per impostazione predefinita. Questo cursore si troverà nell'angolo sinistro della mappa.
Pan - Appena sopra il cursore dello zoom, ci sarà un controllo di panoramica per la panoramica della mappa.
Map Type- È possibile individuare questo controllo nell'angolo in alto a destra della mappa. Fornisce opzioni per il tipo di mappa come Satellite, Roadmap e Terreno. Gli utenti possono scegliere una qualsiasi di queste mappe.
Street view- Tra l'icona Pan e il cursore dello zoom, abbiamo un'icona Pegman. Gli utenti possono trascinare questa icona e posizionarla in una posizione particolare per ottenere la sua vista stradale.

Esempio

Ecco un esempio in cui puoi osservare i controlli dell'interfaccia utente predefiniti forniti da Google Maps:

Disattivazione dei controlli predefiniti dell'interfaccia utente

Possiamo disabilitare i controlli dell'interfaccia utente predefiniti forniti da Google Maps semplicemente rendendo il file disableDefaultUI valore true nelle opzioni della mappa.

Esempio

L'esempio seguente mostra come disabilitare i controlli dell'interfaccia utente predefiniti forniti da Google Maps.

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

</html>

Produrrà il seguente output:

Abilitazione / disabilitazione di tutti i controlli

Oltre a questi controlli predefiniti, Google Maps fornisce anche altri tre controlli come elencato di seguito.

Scale- Il controllo Scala mostra un elemento della scala della mappa. Questo controllo non è abilitato per impostazione predefinita.
Rotate- Il controllo Ruota contiene una piccola icona circolare che consente di ruotare mappe contenenti immagini oblique. Questo controllo viene visualizzato per impostazione predefinita nell'angolo superiore sinistro della mappa. (Per ulteriori informazioni, vedere Immagini a 45 °.)
Overview- Per aumentare e diminuire il livello di zoom della mappa, abbiamo un cursore con i pulsanti + e -, per impostazione predefinita. Questo cursore si trova nell'angolo sinistro della mappa.

Nelle opzioni della mappa, possiamo abilitare e disabilitare qualsiasi controllo fornito da Google Maps come mostrato di seguito:

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

Esempio

Il codice seguente mostra come abilitare tutti i controlli:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Produrrà il seguente output:

Opzioni di controllo

Possiamo modificare l'aspetto dei controlli di Google Maps utilizzando le sue opzioni di controllo. Ad esempio, il controllo dello zoom può essere ridotto o ingrandito. L'aspetto del controllo MapType può essere modificato in una barra orizzontale o in un menu a discesa. Di seguito è riportato un elenco di opzioni di controllo per i controlli Zoom e MapType.

Sr.No.	Nome controllo	Opzioni di controllo
1	Controllo dello zoom	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	Controllo MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Esempio

L'esempio seguente mostra come utilizzare le opzioni di controllo:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Posizionamento di controllo

È possibile modificare la posizione dei controlli aggiungendo la seguente riga nelle opzioni di controllo.

position:google.maps.ControlPosition.Desired_Position,

Ecco l'elenco delle posizioni disponibili in cui un controllo può essere posizionato su una mappa:

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

Esempio

L'esempio seguente mostra come posizionare il controllo MapTypeid in alto al centro della mappa e come posizionare il controllo di zoom in basso al centro della mappa.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output: