Maps API v3でv2のように、1つだけの情報ウィンドウが開くようにする(1)
Google Maps API v3では、情報ウィンドウが複数開けるようになりました。
それはそれで面白く便利ではあるのですが、情報ウィンドウが開いたときに、他の情報ウィンドウをクローズする術がないので
(v2のGMaps2.closeInfoWindow()のように。)、その部分は自分で実装をしなければなりません。
簡単な例としては、グローバル変数(currentInfoWindow)を用意して最後に開いた情報ウィンドウを記憶するようにします。
情報ウィンドウを開く前に必ず、currentInfoWindow.close()とすることで、常に1つだけの情報ウィンドウが表示されるようになります。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&hl=ja"></script>
<script type="text/javascript">
var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶
function initialize() {
//地図初期化
var initPos = new google.maps.LatLng(35.127152, 138.840627);
var myOptions = {
center : initPos,
zoom : 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//マーカー1,2を作成
var markerPos1 = new google.maps.LatLng(35.127152, 138.860627);
var markerPos2 = new google.maps.LatLng(35.127152, 138.810627);
createMarker(map_canvas, markerPos1, "<b>マーカー1</b>");
createMarker(map_canvas, markerPos2, "<b>マーカー2</b>");
}
function createMarker(map, latlng, text) {
var infoWndOpts = {
content : text,
};
var infoWnd = new google.maps.InfoWindow(infoWndOpts);
var markerOpts = {
position : latlng,
map : map
};
var marker = new google.maps.Marker(markerOpts);
google.maps.event.addListener(marker, "click", function(){
//先に開いた情報ウィンドウがあれば、closeする
if (currentInfoWindow) {
currentInfoWindow.close();
}
//情報ウィンドウを開く
infoWnd.open(map, marker);
currentInfoWindow = infoWnd;
});
return marker;
}
window.onload = initialize;
</script>
</head>
<body >
<div id="map_canvas" style="width:100%; height:500px"></div>
</body>
</html>


