• 小
  • 中
  • 大

情報ウィンドウの開閉


情報ウィンドウを地図上に表示するには情報ウィンドウを開く必要があります。情報ウィンドウを開くにはInfoWindowクラスで用意されている「open」methodを使います。


open(map:Map|StreetViewPanorama, anchor?:MVCObject)
指定された地図でこの情報ウィンドウを開きます。オプションで、
情報ウィンドウをアンカーに関連付けることができます。
コア API では、アンカーのみが Marker クラスです。
ただし、position プロパティとオプションで pixelOffset
の計算用に pixelBounds を公開する任意の MVCObject
がアンカーとなることができます。

1番目の引数には情報ウィンドウを表示するMapクラスのオブジェクト又はStreetViewPanoramaクラスのオブジェクトを指定します。

省略可能な2番目の引数には情報ウィンドウを関連付けるアンカーと呼ばれるオブジェクトを指定することも可能です。指定すると情報ウィンドウは指定したアンカーに関連付けられます。

Markerクラスのオブジェクトを指定した場合、マーカーの座標などを基準として情報ウィンドウが表示されます。

次のように記述します。
var map = new google.maps.Map(document.getElementById
("map_canvas"), opts);
var latlng = new google.maps.LatLng(35.658704,139.745408);
var Iwopts = {
content: 'Hello',
positon: latlng
};
var infowindow = new google.maps.InfoWindow(Iwopts);
infowindow.open(map);

この場合、2番目の引数でアンカーが指定されていませんので1番目の引数で指定されている地図を対象に情報ウィンドウが開き地図上に表示されます。

情報ウィンドウを閉じる

開いた情報ウィンドウは、情報ウィンドウ上に表示されている「×」マークをクリックすることで閉じることもできますが、プログラムの中で閉じるにはInfoWindowクラスで用意されている「close」methodを使います。


close()
DOM 構造から削除して、この情報ウィンドウを閉じます。

情報ウィンドウが開いている時にこのmethodを呼び出すと情報ウィンドウが閉じます。

実際には次のように記述します。
var infowindow = new google.maps.InfoWindow(iwopts);
infowindow.open(map);
infowindow.cloase();

サンプルコード

サンプル.js


var map;
var infowindow;

function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById
("map_canvas"), opts);
infowindow = new google.maps.InfoWindow({
content: '東京タワー',
position: latlng
});
}

function doOpen() {
infowindow.open(map);
}

function doClose() {
infowindow.close();
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
<form><p>
<input type="button" id="open" value="開く" onclick="doOpen()" />
<input type="button" id="close" value="閉じる" onclick="doClose()" />
</p></form>
</body>
</html>


表示例 情報ウィンドウの開閉


Google Maps サンプル > 情報ウィンドウの開閉