Google Maps - Marqueurs

Nous pouvons dessiner des objets sur la carte et les lier à une latitude et une longitude souhaitées. Celles-ci sont appelées superpositions. Google Maps propose différentes superpositions comme indiqué ci-dessous.

  • Markers
  • Polylines
  • Polygons
  • Cercle et rectangle
  • Fenêtre d'informations
  • Symbols

Pour marquer un seul emplacement sur la carte, Google Maps fournit markers. Ces marqueurs utilisent un symbole standard et ces symboles peuvent être personnalisés. Ce chapitre explique comment ajouter des marqueurs et comment les personnaliser, les animer et les supprimer.

Ajout d'un marqueur simple

Vous pouvez ajouter un marqueur simple à la carte à un emplacement souhaité en instanciant la classe de marqueurs et en spécifiant la position à marquer à l'aide de latlng, comme indiqué ci-dessous.

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

Exemple

Le code suivant fixe le marqueur sur la ville Hyderabad (Inde).

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

Il produit la sortie suivante -

Animation du marqueur

Après avoir ajouté un marqueur à la carte, vous pouvez aller plus loin et y ajouter des animations telles que bounce et drop. L'extrait de code suivant montre comment ajouter des animations de rebond et déposer des animations à un marqueur.

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

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

Exemple

Le code suivant définit le marqueur sur la ville d'Hyderabad avec un effet d'animation supplémentaire -

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

Il produit la sortie suivante -

Personnalisation du marqueur

Vous pouvez utiliser vos propres icônes au lieu de l'icône par défaut fournie par Google Maps. Définissez simplement l'icône commeicon:'ICON PATH'. Et vous pouvez rendre cette icône déplaçable en définissantdraggable:true.

Exemple

L'exemple suivant montre comment personnaliser le marqueur en une icône souhaitée -

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

Il produit la sortie suivante -

Suppression du marqueur

Vous pouvez supprimer un marqueur existant en définissant le marqueur sur null à l'aide de la marker.setMap() méthode.

Exemple

L'exemple suivant montre comment supprimer le marqueur d'une carte -

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

Il produit la sortie suivante -