Google 地图 - 信息窗口

除了标记、多边形、折线和其他几何形状外，我们还可以在地图上绘制信息窗口。本章介绍如何使用信息窗口。

添加窗口

信息窗口用于向地图添加任何类型的信息。例如，如果希望提供地图上某一位置的相关信息，可以使用信息窗口。通常情况下，信息窗口会附着到标记。你可以通过对 google.maps.InfoWindow 类实例化来附加一个信息窗口。它具有以下属性 -

内容 - 可以使用此选项以字符串格式传递你的内容。
位置 - 可以使用此选项选择信息窗口的位置。
最大宽度 - 默认情况下，信息窗口的宽度将延伸到文本折行为止。通过指定最大宽度，我们可以限制信息窗口的水平大小。

示例

以下示例展示了如何设置标记并在其上方指定一个信息窗口 -

现场示范

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

它会生成以下输出 -

打印页面