Google Maps 信息窗口
除了标记、多边形、折线和其他几何形状,我们还可以在地图上绘制一个信息窗口。本章说明如何使用信息窗口。
添加窗口
信息窗口用于向地图添加任何类型的信息。例如,如果您想提供有关地图上某个位置的信息,您可以使用信息窗口。通常信息窗口附加到一个标记。您可以通过实例化
google.maps.InfoWindow 类来附加信息窗口。它具有以下属性-
Content-您可以使用此选项以字符串格式传递您的内容。
position-您可以使用此选项选择信息窗口的位置。
maxWidth-默认情况下,信息窗口的宽度将被拉伸,直到文本被换行。通过指定 maxWidth,我们可以横向限制信息窗口的大小。
示例
以下示例显示了如何设置标记并在其上方指定信息窗口-
<!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>