Google Maps - Marcadores

Podemos desenhar objetos no mapa e vinculá-los a uma latitude e longitude desejadas. Eles são chamados de sobreposições. O Google Maps fornece várias sobreposições, conforme mostrado abaixo.

Markers
Polylines
Polygons
Círculo e retângulo
Janela de informação
Symbols

Para marcar um único local no mapa, o Google Maps fornece markers. Esses marcadores usam um símbolo padrão e esses símbolos podem ser personalizados. Este capítulo explica como adicionar marcadores e como personalizá-los, animá-los e removê-los.

Adicionando um Marcador Simples

Você pode adicionar um marcador simples ao mapa em um local desejado instanciando a classe do marcador e especificando a posição a ser marcada usando latlng, conforme mostrado abaixo.

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

Exemplo

O código a seguir define o marcador na cidade Hyderabad (Índia).

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

Ele produz a seguinte saída -

Animando o Marcador

Depois de adicionar um marcador ao mapa, você pode ir mais longe e adicionar animações a ele, como bounce e drop. O fragmento de código a seguir mostra como adicionar animações de salto e soltar a um marcador.

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

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

Exemplo

O código a seguir define o marcador na cidade Hyderabad com um efeito de animação adicionado -

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

Ele produz a seguinte saída -

Personalizando o Marcador

Você pode usar seus próprios ícones em vez do ícone padrão fornecido pelo Google Maps. Basta definir o ícone comoicon:'ICON PATH'. E você pode tornar este ícone arrastável definindodraggable:true.

Exemplo

O exemplo a seguir mostra como personalizar o marcador para um ícone desejado -

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

Ele produz a seguinte saída -

Removendo o Marcador

Você pode remover um marcador existente configurando o marcador para nulo usando o marker.setMap() método.

Exemplo

O exemplo a seguir mostra como remover o marcador de um 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>

Ele produz a seguinte saída -

↰ Previous page Next page ↱