Google Maps - Infofenster

Neben Markierungen, Polygonen, Polylinien und anderen geometrischen Formen können wir auch ein Infofenster auf der Karte zeichnen. In diesem Kapitel wird die Verwendung des Infofensters erläutert.

Fenster hinzufügen

Das Infofenster wird verwendet, um der Karte Informationen jeglicher Art hinzuzufügen. Wenn Sie beispielsweise Informationen zu einem Ort auf der Karte bereitstellen möchten, können Sie ein Infofenster verwenden. Normalerweise ist das Infofenster an eine Markierung angehängt. Sie können ein Infofenster anhängen, indem Sie das instanziierengoogle.maps.InfoWindowKlasse. Es hat die folgenden Eigenschaften -

Content - Mit dieser Option können Sie Ihren Inhalt im String-Format übergeben.
position - Mit dieser Option können Sie die Position des Infofensters auswählen.
maxWidth- Standardmäßig wird die Breite des Infofensters gedehnt, bis der Text umbrochen wird. Durch Angabe von maxWidth können wir die Größe des Infofensters horizontal einschränken.

Beispiel

Das folgende Beispiel zeigt, wie Sie die Markierung setzen und ein Infofenster darüber angeben.

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

Es wird die folgende Ausgabe erzeugt -