Google Maps - Symbole

Neben Markierungen, Polygonen, Polylinien und anderen geometrischen Formen können wir einer Karte auch vordefinierte Vektorbilder (Symbole) hinzufügen. In diesem Kapitel wird erläutert, wie Sie die von Google Maps bereitgestellten Symbole verwenden.

Hinzufügen eines Symbols

Google bietet verschiedene vektorbasierte Bilder (Symbole) an, die auf einem Marker oder einer Polylinie verwendet werden können. Genau wie bei anderen Überlagerungen müssen wir ihre jeweiligen Klassen instanziieren, um diese vordefinierten Symbole auf einer Karte zu zeichnen. Im Folgenden finden Sie eine Liste der von Google bereitgestellten vordefinierten Symbole und ihrer Klassennamen.

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

Diese Symbole haben die folgenden Eigenschaften: Pfad, Füllfarbe, Füllkapazität, Skalierung, StokeColor, Strichstärke und Strichgewicht.

Beispiel

Das folgende Beispiel zeigt, wie vordefinierte Symbole in Google Map gezeichnet werden.

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

Es erzeugt die folgende Ausgabe -

Das Symbol animieren

Genau wie bei Markern können Sie den Symbolen auch Animationen wie Bounce und Drop hinzufügen.

Beispiel

Das folgende Beispiel zeigt, wie Sie ein Symbol als Markierung auf einer Karte verwenden und eine Animation hinzufügen.

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

Es erzeugt die folgende Ausgabe -