Q&A
お世話になっております。
googlemapAPIを使い、
1つのgooglemapに複数のピンを立てたマップを作成しております。
方法は下記URLの方法そのままです。
http://www.tam-tam.co.jp/tipsnote/javascript/post7755.html
実装は問題なくできるのですが、このまま流用しますと、ピンをクリックした時に
表示される吹き出しが、他のピンをクリックした際に消えずそのまま残るのですが、
これを先に表示されているものが削除されるようにしたいです。
http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_singleInfoWindow.html
http://pinoyuki.hatenablog.com/entry/2012/03/17/010213
↑上記のURLを参考に、markerEvent()
内に
javascript
1 if (currentInfoWindow) { 2 currentInfoWindow.close(); 3 } 4 //情報ウィンドウを開く 5 infoWnd.open(map, marker); 6 7 currentInfoWindow = infoWnd; 8 }); 9 return marker; 10 } 11 window.onload = initialize;
や、
javascript
1 if (openInfoWindow) { 2 openInfoWindow.close(); 3 }
を追加してみたのですが、
ピンから吹き出しが出ないといった状態になったりとうまくいきませんでした…
ご教授いただけると幸いです。
下記ソースは最初に挙げさせていただいた
http://www.tam-tam.co.jp/tipsnote/javascript/post7755.html
を流用したソースとなっております。
html
1 <div id="google-maps" class="google-maps"></div>
javascript
1var map; 2var marker = []; 3var infoWindow = []; 4var markerData = [ // マーカーを立てる場所名・緯度・経度 5 { 6 name: 'テスと', 7 lat: 35.681298, // 緯度 8 lng: 139.7640582 // 経度 9 }, { 10 name: 'てすと01', 11 lat: 35.6810041, // 緯度 12 lng: 1139.7615828 // 経度 13 } 14]; 15 16function initMap() { 17 // 地図の作成 18 var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成 19 map = new google.maps.Map(document.getElementById('google-maps'), { // #sampleに地図を埋め込む 20 center: mapLatLng, // 地図の中心を指定 21 zoom: 18 // 地図のズームを指定 22 }); 23 24 // マーカー毎の処理 25 for (var i = 0; i < markerData.length; i++) { 26 markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成 27 marker[i] = new google.maps.Marker({ // マーカーの追加 28 position: markerLatLng, // マーカーを立てる位置を指定 29 map: map // マーカーを立てる地図を指定 30 }); 31 32 infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加 33 content: '<div class="name">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容 34 }); 35 36 markerEvent(i); // マーカーにクリックイベントを追加 37 } 38 39} 40 41// マーカーにクリックイベントを追加 42function markerEvent(i) { 43 marker[i].addListener('click', function() { // マーカーをクリックしたとき 44 infoWindow[i].open(map, marker[i]); 45 }); 46}
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2016/11/10 07:36
2016/11/10 08:24 編集
2016/11/10 08:55
2016/11/10 10:35