Google Maps - Símbolos

Além de marcadores, polígonos, polilinhas e outras formas geométricas, também podemos adicionar imagens vetoriais predefinidas (símbolos) em um mapa. Este capítulo explica como usar os símbolos fornecidos pelo Google Maps.

Adicionando um Símbolo

O Google fornece várias imagens (símbolos) baseadas em vetores que podem ser usadas em um marcador ou polilinha. Assim como outras sobreposições, para desenhar esses símbolos predefinidos em um mapa, temos que instanciar suas respectivas classes. Abaixo está uma lista de símbolos predefinidos fornecidos pelo Google e seus nomes de classes -

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

Esses símbolos têm as seguintes propriedades - path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity e strokeWeight.

Exemplo

O exemplo a seguir demonstra como desenhar símbolos predefinidos no Google Maps.

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

Ele produz a seguinte saída -

Animando o símbolo

Assim como os marcadores, você também pode adicionar animações como salto e queda aos símbolos.

Exemplo

O exemplo a seguir mostra como usar um símbolo como um marcador em um mapa e adicionar animação a ele -

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

Ele produz a seguinte saída -

↰ Previous page Next page ↱