Google Maps - Simboli

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 vettoriali (simboli) 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: