Google Maps - Finestra informativa

Oltre a marker, poligoni, polilinee e altre forme geometriche, possiamo anche disegnare una finestra informativa sulla mappa. Questo capitolo spiega come utilizzare la finestra informazioni.

Aggiunta di una finestra

La finestra delle informazioni viene utilizzata per aggiungere qualsiasi tipo di informazione alla mappa. Ad esempio, se desideri fornire informazioni su una posizione sulla mappa, puoi utilizzare una finestra informativa. Di solito la finestra delle informazioni è attaccata a un indicatore. Puoi allegare una finestra informativa istanziando il filegoogle.maps.InfoWindowclasse. Ha le seguenti proprietà:

Content - Puoi passare i tuoi contenuti in formato String usando questa opzione.
position - Puoi scegliere la posizione della finestra informativa utilizzando questa opzione.
maxWidth- Per impostazione predefinita, la larghezza della finestra delle informazioni verrà allungata fino a quando il testo non sarà a capo. Specificando maxWidth, possiamo limitare la dimensione della finestra informativa orizzontalmente.

Esempio

L'esempio seguente mostra come impostare il marker e specificare una finestra informativa sopra di esso:

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

Produrrà il seguente output: