Google Maps - Símbolos

Además de marcadores, polígonos, polilíneas y otras formas geométricas, también podemos agregar imágenes vectoriales predefinidas (símbolos) en un mapa. Este capítulo explica cómo utilizar los símbolos proporcionados por Google Maps.

Agregar un símbolo

Google proporciona varias imágenes basadas en vectores (símbolos) que se pueden usar en un marcador o una polilínea. Al igual que otras superposiciones, para dibujar estos símbolos predefinidos en un mapa, tenemos que instanciar sus respectivas clases. A continuación se muestra una lista de símbolos predefinidos proporcionados por Google y sus nombres de clase:

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

Estos símbolos tienen las siguientes propiedades: path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity y strokeWeight.

Ejemplo

El siguiente ejemplo demuestra cómo dibujar símbolos predefinidos en 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 la siguiente salida:

Animando el símbolo

Al igual que los marcadores, también puede agregar animaciones como rebotar y soltar a los símbolos.

Ejemplo

El siguiente ejemplo muestra cómo usar un símbolo como marcador en un mapa y agregarle animación:

<!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 la siguiente salida:

↰ Previous page Next page ↱