Google Maps - Janela de informações

Além de marcadores, polígonos, polilinhas e outras formas geométricas, também podemos desenhar uma janela de informações no mapa. Este capítulo explica como usar a janela de informações.

Adicionando uma janela

A janela de informações é usada para adicionar qualquer tipo de informação ao mapa. Por exemplo, se você deseja fornecer informações sobre um local no mapa, pode usar uma janela de informações. Normalmente, a janela de informações é anexada a um marcador. Você pode anexar uma janela de informações instanciando ogoogle.maps.InfoWindowclasse. Possui as seguintes propriedades -

  • Content - Você pode passar seu conteúdo em formato String usando esta opção.

  • position - Você pode escolher a posição da janela de informações usando esta opção.

  • maxWidth- Por padrão, a largura da janela de informações será esticada até que o texto seja quebrado. Ao especificar maxWidth, podemos restringir o tamanho da janela de informações horizontalmente.

Exemplo

O exemplo a seguir mostra como definir o marcador e especificar uma janela de informações acima dele -

<!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: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produzirá a seguinte saída -