Google Maps - Symboles

En plus des marqueurs, des polygones, des polylignes et d'autres formes géométriques, nous pouvons également ajouter des images vectorielles prédéfinies (symboles) sur une carte. Ce chapitre explique comment utiliser les symboles fournis par Google Maps.

Ajout d'un symbole

Google fournit diverses images vectorielles (symboles) qui peuvent être utilisées sur un marqueur ou une polyligne. Tout comme les autres superpositions, pour dessiner ces symboles prédéfinis sur une carte, nous devons instancier leurs classes respectives. Vous trouverez ci-dessous une liste de symboles prédéfinis fournis par Google et leurs noms de classe -

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

Ces symboles ont les propriétés suivantes: path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity et strokeWeight.

Exemple

L'exemple suivant montre comment dessiner des symboles prédéfinis sur 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>

Il produit la sortie suivante -

Animation du symbole

Tout comme les marqueurs, vous pouvez également ajouter des animations telles que rebondir et déposer aux symboles.

Exemple

L'exemple suivant montre comment utiliser un symbole comme marqueur sur une carte et y ajouter une animation -

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

Il produit la sortie suivante -