Google Maps - Marcatori

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. Lo snippet di codice seguente 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: