Google Maps - Guida rapida

Cosa sono le Google Maps?

Google Maps è un servizio di mappe web gratuito di Google che fornisce vari tipi di informazioni geografiche. Utilizzando Google Maps, si può.

  • Cerca luoghi o ottieni indicazioni stradali da un luogo a un altro.

  • Visualizza e naviga attraverso le immagini panoramiche orizzontali e verticali a livello stradale di varie città in tutto il mondo.

  • Ottieni informazioni specifiche come il traffico in un punto particolare.

Google Maps fornisce un'API tramite la quale è possibile personalizzare le mappe e le informazioni visualizzate su di esse. Questo capitolo spiega come caricare una semplice mappa di Google sulla tua pagina web utilizzando HTML e JavaScript.

Procedura per caricare la mappa su una pagina Web

Segui i passaggi indicati di seguito per caricare una mappa sulla tua pagina web -

Passaggio 1: crea una pagina HTML

Crea una pagina HTML di base con i tag head e body come mostrato di seguito:

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Passaggio 2: carica l'API

Carica o includi l'API di Google Maps utilizzando il tag script come mostrato di seguito -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Passaggio 3: creare il contenitore

Per mantenere la mappa, dobbiamo creare un elemento contenitore, generalmente il tag <div> (un contenitore generico) viene utilizzato per questo scopo. Crea un elemento contenitore e definisci le sue dimensioni come mostrato di seguito:

<div id = "sample" style = "width:900px; height:580px;"></div>

Passaggio 4: opzioni della mappa

Prima di inizializzare la mappa, dobbiamo creare un file mapOptionsoggetto (viene creato proprio come un letterale) e imposta i valori per le variabili di inizializzazione della mappa. Una mappa ha tre opzioni principali, vale a dire,centre, zoom, e maptypeid.

  • centre- Sotto questa proprietà, dobbiamo specificare la posizione in cui vogliamo centrare la mappa. Per passare la posizione, dobbiamo creare un fileLatLng oggetto passando la latitudine e la longitudine della posizione richiesta al costruttore.

  • zoom - Sotto questa proprietà, dobbiamo specificare il livello di zoom della mappa.

  • maptypeid- Sotto questa proprietà, dobbiamo specificare il tipo di mappa che vogliamo. Di seguito sono riportati i tipi di mappe fornite da Google:

    • ROADMAP (normale, mappa 2D predefinita)
    • SATELLITE (mappa fotografica)
    • HYBRID (combinazione di due o più altri tipi)
    • TERRENO (mappa con montagne, fiumi, ecc.)

All'interno di una funzione, diciamo, loadMap(), creare l'oggetto mapOptions e impostare i valori richiesti per center, zoom e mapTypeId come mostrato di seguito.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Passaggio 5: creare un oggetto mappa

È possibile creare una mappa istanziando la classe JavaScript chiamata Map. Durante l'istanza di questa classe, devi passare un contenitore HTML per contenere la mappa e le opzioni della mappa per la mappa richiesta. Crea un oggetto mappa come mostrato di seguito.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Passaggio 6: carica la mappa

Infine, carica la mappa chiamando il metodo loadMap () o aggiungendo un listener DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Esempio

L'esempio seguente mostra come caricare la roadmap della città denominata Vishakhapatnam con un valore di zoom di 12.

<!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:12, 
               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>

Produce il seguente output:

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:

Aumenta / diminuisce il valore di zoom

È possibile aumentare o diminuire il valore di zoom di una mappa modificando il valore di zoom attributo nelle opzioni della mappa.

Sintassi

Possiamo aumentare o diminuire il valore di zoom della mappa utilizzando l'opzione zoom. Di seguito è riportata la sintassi per modificare il valore di zoom della mappa corrente.

var mapOptions = {
   zoom:required zoom value
};

Esempio: Zoom 6

Il codice seguente mostrerà la roadmap della città Vishakhapatnam con un valore di zoom di 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>

Produrrà il seguente output:

Esempio: Zoom 10

Il codice seguente mostrerà la roadmap della città Vishakhapatnam con un valore di zoom di 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>

Produrrà il seguente output:

Per impostazione predefinita, i nomi delle città e delle opzioni riportati sulla mappa saranno in inglese. Se necessario, possiamo visualizzare tali informazioni anche in altre lingue. Questo processo è noto comelocalization. In questo capitolo impareremo come localizzare una mappa.

Localizzazione di una mappa

È possibile personalizzare (localizzare) la lingua della mappa specificando l'opzione della lingua nell'URL come mostrato di seguito.

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

Esempio

Ecco un esempio che mostra come localizzare GoogleMaps. Qui puoi vedere una roadmap della Cina localizzata in lingua cinese.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               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:580px; height:400px;"></div>
   </body>

</html>

Produzione

Produrrà il seguente output:

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. (Vedi immagini a 45 ° per maggiori informazioni.)

  • 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:

Possiamo disegnare oggetti sulla mappa e legarli a una latitudine e longitudine desiderate. Questi sono chiamati overlay. Google Maps fornisce varie sovrapposizioni come mostrato di seguito.

  • Markers
  • Polylines
  • Polygons
  • Cerchio e rettangolo
  • Finestra informativa
  • Symbols

Per contrassegnare una singola posizione sulla mappa, Google Maps fornisce markers. Questi contrassegni utilizzano un simbolo standard e questi simboli possono essere personalizzati. Questo capitolo spiega come aggiungere i marcatori e come personalizzarli, animarli e rimuoverli.

Aggiunta di un semplice marker

È possibile aggiungere un semplice marker alla mappa in una posizione desiderata istanziando la classe marker e specificando la posizione da contrassegnare utilizzando latlng, come mostrato di seguito.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Esempio

Il codice seguente imposta l'indicatore sulla città Hyderabad (India).

<!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:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Animazione del marker

Dopo aver aggiunto un indicatore alla mappa, puoi andare oltre e aggiungere animazioni come bounce e drop. Il seguente frammento di codice mostra come aggiungere animazioni di rimbalzo e rilascio a un marcatore.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

Esempio

Il codice seguente imposta l'indicatore sulla città di Hyderabad con un effetto di animazione aggiunto:

<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Personalizzazione del marker

Puoi utilizzare le tue icone al posto dell'icona predefinita fornita da Google Maps. Basta impostare l'icona comeicon:'ICON PATH'. E puoi rendere questa icona trascinabile impostandodraggable:true.

Esempio

L'esempio seguente mostra come personalizzare il marcatore con un'icona desiderata:

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Rimozione del marker

È possibile rimuovere un marker esistente impostando il marker su null utilizzando il marker.setMap() metodo.

Esempio

L'esempio seguente mostra come rimuovere l'indicatore da una 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(17.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Nel capitolo precedente abbiamo appreso come utilizzare i marcatori in Google Maps. Insieme ai marker, possiamo anche aggiungere varie forme come cerchi, poligoni, rettangoli, polilinee, ecc. Questo capitolo spiega come utilizzare le forme fornite da Google Maps.

Polilinee

Le polilinee, fornite da Google Maps, sono utili per tracciare diversi percorsi. È possibile aggiungere polilinee a una mappa istanziando la classegoogle.maps.Polyline. Durante la creazione di un'istanza di questa classe, dobbiamo specificare i valori richiesti delle proprietà di una polilinea come StrokeColor, StokeOpacity e strokeWeight.

Possiamo aggiungere una polilinea a una mappa passando il suo oggetto al metodo setMap(MapObject). Possiamo eliminare la polilinea passando un valore nullo al metodo SetMap ().

Esempio

L'esempio seguente mostra una polilinea che evidenzia il percorso tra le città Delhi, Londra, New York e Pechino.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produrrà il seguente output:

Poligoni

I poligoni vengono utilizzati per evidenziare una particolare area geografica di uno stato o di un paese. È possibile creare un poligono desiderato istanziando la classegoogle.maps.Polygon. Durante la creazione dell'istanza, dobbiamo specificare i valori desiderati per le proprietà di Polygon come path, strokeColor, strokeOapacity, fillColor, fillOapacity, ecc.

Esempio

L'esempio seguente mostra come disegnare un poligono per evidenziare le città Hyderabad, Nagpur e Aurangabad.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produrrà il seguente output:

Rettangoli

Possiamo utilizzare i rettangoli per evidenziare l'area geografica di una particolare regione o stato utilizzando una casella rettangolare. Possiamo avere un rettangolo su una mappa istanziando la classegoogle.maps.Rectangle. Durante la creazione dell'istanza, dobbiamo specificare i valori desiderati per le proprietà del rettangolo come path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, ecc.

Esempio

L'esempio seguente mostra come evidenziare una particolare area su una mappa utilizzando un rettangolo:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

Questo ti dà il seguente output:

Cerchi

Proprio come i rettangoli, possiamo usare i cerchi per evidenziare l'area geografica di una particolare regione o stato usando un cerchio istanziando la classe google.maps.Circle. Durante la creazione dell'istanza, dobbiamo specificare i valori desiderati per le proprietà del cerchio come path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, ecc.

Esempio

L'esempio seguente mostra come evidenziare l'area intorno a Nuova Delhi utilizzando un cerchio:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produrrà il seguente output:

Oltre a marker, poligoni, polilinee e altre forme geometriche, possiamo anche disegnare una finestra informativa sulla mappa. Questo capitolo spiega come utilizzare la finestra informazioni.

Aggiunta di una finestra

La finestra delle informazioni viene utilizzata per aggiungere qualsiasi tipo di informazione alla mappa. Ad esempio, se desideri fornire informazioni su una posizione sulla mappa, puoi utilizzare una finestra informativa. Di solito la finestra delle informazioni è attaccata a un indicatore. Puoi allegare una finestra informativa istanziando il filegoogle.maps.InfoWindowclasse. Ha le seguenti proprietà:

  • Content - Puoi passare i tuoi contenuti in formato String usando questa opzione.

  • position - Puoi scegliere la posizione della finestra informativa utilizzando questa opzione.

  • maxWidth- Per impostazione predefinita, la larghezza della finestra delle informazioni verrà allungata fino a quando il testo non viene avvolto. Specificando maxWidth, possiamo limitare la dimensione della finestra informativa orizzontalmente.

Esempio

L'esempio seguente mostra come impostare il marker e specificare una finestra informativa sopra di esso:

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produrrà il seguente output:

Oltre a marker, poligoni, polilinee e altre forme geometriche, possiamo anche aggiungere immagini vettoriali predefinite (simboli) su una mappa. Questo capitolo spiega come utilizzare i simboli forniti da Google Maps.

Aggiunta di un simbolo

Google fornisce varie immagini (simboli) basate su vettori che possono essere utilizzate su un indicatore o una polilinea. Proprio come altre sovrapposizioni, per disegnare questi simboli predefiniti su una mappa, dobbiamo istanziare le rispettive classi. Di seguito è riportato un elenco di simboli predefiniti forniti da Google e i nomi delle classi:

  • Circle - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

Questi simboli hanno le seguenti proprietà: path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity e strokeWeight.

Esempio

L'esempio seguente mostra come disegnare simboli predefiniti su Google Map.

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Animare il simbolo

Proprio come i marcatori, puoi anche aggiungere animazioni come rimbalzo e caduta ai simboli.

Esempio

L'esempio seguente mostra come utilizzare un simbolo come indicatore su una mappa e aggiungervi un'animazione:

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Il programma JavaScript di Google Maps può rispondere a vari eventi generati dall'utente. Questo capitolo fornisce esempi che dimostrano come eseguire la gestione degli eventi mentre si lavora con Google Maps.

Aggiunta di un listener di eventi

È possibile aggiungere un listener di eventi utilizzando il metodo addListener(). Accetta parametri come il nome dell'oggetto su cui vogliamo aggiungere il listener, il nome dell'evento e l'evento del gestore.

Esempio

L'esempio seguente mostra come aggiungere un listener di eventi a un oggetto marker. Il programma aumenta il valore di zoom della mappa di 5 ogni volta che si fa doppio clic sul marker.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Apertura di una finestra informativa al clic

Il codice seguente apre una finestra informativa facendo clic sul marcatore -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

Rimozione dell'ascoltatore

È possibile rimuovere un listener esistente utilizzando il metodo removeListener(). Questo metodo accetta l'oggetto listener, quindi dobbiamo assegnare l'ascoltatore a una variabile e passarlo a questo metodo.

Esempio

Il codice seguente mostra come rimuovere un listener:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce il seguente output:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved