Google Maps: ventana de información

Además de marcadores, polígonos, polilíneas y otras formas geométricas, también podemos dibujar una ventana de información en el mapa. Este capítulo explica cómo utilizar la ventana de información.

Agregar una ventana

La ventana de información se utiliza para agregar cualquier tipo de información al mapa. Por ejemplo, si desea proporcionar información sobre una ubicación en el mapa, puede utilizar una ventana de información. Por lo general, la ventana de información se adjunta a un marcador. Puede adjuntar una ventana de información creando una instancia delgoogle.maps.InfoWindowclase. Tiene las siguientes propiedades:

Content - Puede pasar su contenido en formato String usando esta opción.
position - Puede elegir la posición de la ventana de información usando esta opción.
maxWidth- De forma predeterminada, el ancho de la ventana de información se ampliará hasta que el texto esté ajustado. Al especificar maxWidth, podemos restringir el tamaño de la ventana de información horizontalmente.

Ejemplo

El siguiente ejemplo muestra cómo configurar el marcador y especificar una ventana de información encima de él:

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

Producirá la siguiente salida: