Google-maps-info-window
提供:Dev Guides
Googleマップ-情報ウィンドウ
マーカー、ポリゴン、ポリライン、およびその他の幾何学的図形に加えて、マップ上に情報ウィンドウを描画することもできます。 この章では、情報ウィンドウの使用方法について説明します。
ウィンドウを追加する
情報ウィンドウは、あらゆる種類の情報をマップに追加するために使用されます。 たとえば、地図上の場所に関する情報を提供する場合は、情報ウィンドウを使用できます。 通常、情報ウィンドウはマーカーに添付されます。 google.maps.InfoWindow クラスをインスタンス化して、情報ウィンドウを添付できます。 次のプロパティがあります-
- コンテンツ-このオプションを使用して、文字列形式でコンテンツを渡すことができます。
- 位置-このオプションを使用して情報ウィンドウの位置を選択できます。
- 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>
それは次の出力を生成します-