google maps api v2の頃のように、
地図やマーカーをクリックすることで
infowindowの表示を制御したいと思います。
google maps api v2の頃は
地図をクリックしたり、
他のマーカーをクリックすると、
開いていたinfowindowは閉じました。
しかし、ｖ３になってからは
自分できちんと閉じてあげないと
infowindowは閉じれくれなくなりました。
そこでｖ２の頃のような動作を行うコードを書いてみました。
サンプルではマーカーをクリックするとinfowindowが開いて、
その後、地図や他のマーカーをクリックすると
開いていたinfowindowは閉じられます。
ポイントは１６行目の
var infowindow = new google.maps.InfoWindow();でinfowindowを作成し、
その変数を使いますと言うことです。
infowindowを開く時は
２７、４１行目のように
infowindow.open(gmap, this);し、
閉じる時は４９行目のように
infowindow.close();することで一つのinfowindowを表示する位置・内容を変えながら、
開いたり閉じたりする仕組みです。
以下サンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>google maps api v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
var map = document.getElementById("map_canvas");
var latlng = new google.maps.LatLng(35.6585, 139.7454);
var mapOptions = {
zoom: 10,
center: latlng
};
var gmap = new google.maps.Map(map, mapOptions);
var infowindow = new google.maps.InfoWindow();
// ---------------------------------------------
// marker A（東京タワー）
var marker_A = new google.maps.Marker({
map: gmap,
position: { lat: 35.6585, lng: 139.7454 }
});
google.maps.event.addListener(marker_A, "click", function (e) {
infowindow.setPosition(e.latLng);
infowindow.setContent("東京タワー");
infowindow.open(gmap, this);
// 下記のように設定しても同じです
//infowindow.open(gmap, marker_A);
});
// ---------------------------------------------
// marker B（スカイツリー）
var marker_B = new google.maps.Marker({
map: gmap,
position: { lat: 35.7100, lng: 139.8107 }
});
google.maps.event.addListener(marker_B, "click", function (e) {
infowindow.setPosition(e.latLng);
infowindow.setContent("スカイツリー");
infowindow.open(gmap, this);
// 下記のように設定しても同じです
//infowindow.open(gmap, marker_B);
});
// ---------------------------------------------
// 地図クリックイベント
google.maps.event.addDomListener(gmap, "click", function () {
infowindow.close();
});
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>
</html>
0 件のコメント:
コメントを投稿