Google Maps - Fenêtre d'informations

En plus des marqueurs, polygones, polylignes et autres formes géométriques, nous pouvons également dessiner une fenêtre d'informations sur la carte. Ce chapitre explique comment utiliser la fenêtre d'informations.

Ajouter une fenêtre

La fenêtre d'informations est utilisée pour ajouter tout type d'informations à la carte. Par exemple, si vous souhaitez fournir des informations sur un emplacement sur la carte, vous pouvez utiliser une fenêtre d'informations. Habituellement, la fenêtre d'informations est attachée à un marqueur. Vous pouvez joindre une fenêtre d'informations en instanciant legoogle.maps.InfoWindowclasse. Il a les propriétés suivantes -

Content - Vous pouvez transmettre votre contenu au format String en utilisant cette option.
position - Vous pouvez choisir la position de la fenêtre d'informations en utilisant cette option.
maxWidth- Par défaut, la largeur de la fenêtre d'informations sera étirée jusqu'à ce que le texte soit enveloppé. En spécifiant maxWidth, nous pouvons restreindre la taille de la fenêtre d'informations horizontalement.

Exemple

L'exemple suivant montre comment définir le marqueur et spécifier une fenêtre d'informations au-dessus -

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

Il produira la sortie suivante -