Google Maps: marcadores

Podemos dibujar objetos en el mapa y vincularlos a la latitud y longitud deseadas. Estos se llaman superposiciones. Google Maps proporciona varias superposiciones como se muestra a continuación.

Markers
Polylines
Polygons
Círculo y rectángulo
Ventana de información
Symbols

Para marcar una única ubicación en el mapa, Google Maps proporciona markers. Estos marcadores utilizan un símbolo estándar y estos símbolos se pueden personalizar. Este capítulo explica cómo agregar marcadores y cómo personalizarlos, animarlos y eliminarlos.

Agregar un marcador simple

Puede agregar un marcador simple al mapa en una ubicación deseada creando una instancia de la clase de marcador y especificando la posición que se marcará usando latlng, como se muestra a continuación.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Ejemplo

El siguiente código establece el marcador en la ciudad de Hyderabad (India).

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Animando el marcador

Después de agregar un marcador al mapa, puede ir más allá y agregarle animaciones como bounce y drop. El siguiente fragmento de código muestra cómo agregar animaciones de rebote y soltar a un marcador.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

Ejemplo

El siguiente código establece el marcador en la ciudad de Hyderabad con un efecto de animación adicional:

<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Personalización del marcador

Puede utilizar sus propios iconos en lugar del icono predeterminado proporcionado por Google Maps. Simplemente configure el icono comoicon:'ICON PATH'. Y puede hacer que este icono se pueda arrastrar configurandodraggable:true.

Ejemplo

El siguiente ejemplo muestra cómo personalizar el marcador a un icono deseado:

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

Quitar el marcador

Puede eliminar un marcador existente configurando el marcador como nulo utilizando el marker.setMap() método.

Ejemplo

El siguiente ejemplo muestra cómo eliminar el marcador de un mapa:

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Produce la siguiente salida:

↰ Previous page Next page ↱