人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Google Mapで複数のマーカーの情報ウィンドウを切り替えたいです。

2個の場合はうまくいきました。
http://weed777.sakura.ne.jp/wordpress/?p=107

原理としては同じコードなのですが、7個に増やすとうまくいきません。
http://weed777.sakura.ne.jp/wordpress/?p=122

どうぞよろしくお願いします。

●質問者: weed_7777
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

同時には 1 つのウィンドウのみ表示したい場合(Google マップの動作と同じ)、情報ウィンドウを 1 つだけ作成し、マップ イベント(クリックなど)により別の地点や、マーカーに再割り当てします。
情報ウィンドウ - Google Maps JavaScript API V3 オーバーレイ - Google Maps JavaScript API V3 - Google Code

とあったので、infowindowは使い回してみました。
クリックイベント割り当ては下記のサイトを参考にし関数に投げています。
イベント リスナでクロージャを使用する - Google Maps JavaScript API V3 のイベント - Google Maps JavaScript API V3 - Google Code

<script type="text/javascript">
function initialize() {
 var json =
 { "spots": [
 { "lat": "35.708104", "lng": "139.577644", "category_id": "189", "id": "464704", "category": "レンタカー", "distance": "44", "name": "トヨタレンタリース東京 吉祥寺" },
 { "lat": "35.707729", "lng": "139.577865", "category_id": "83", "id": "698546", "category": "警察・交番", "distance": "51", "name": "武蔵野警察署八幡西宮交番" },
 { "lat": "35.707023471361", "lng": "139.578433703041", "category_id": "166", "id": "486294", "category": "雑貨屋", "distance": "134", "name": "Cut Bound" },
 { "lat": "35.707619", "lng": "139.579336", "category_id": "21", "id": "215488", "category": "スーパー", "distance": "184", "name": "マルエツ プチ 吉祥寺店" },
 { "lat": "35.70645242", "lng": "139.5787114", "category_id": "20", "id": "452375", "category": "コンビニ", "distance": "197", "name": "ファミリーマート 吉祥寺東急通り店" },
 { "lat": "35.7061334721034", "lng": "139.578498601913", "category_id": "72", "id": "336698", "category": "ホテル", "distance": "215", "name": "吉祥寺第一ホテル" },
 { "lat": "35.705746", "lng": "139.577751", "category_id": "9", "id": "10832", "category": "カフェ・コーヒーショップ", "distance": "232", "name": "イルカッフェ" },
 { "lat": "35.7055977857241", "lng": "139.577871459904", "category_id": "198", "id": "221834", "category": "ファミリーレストラン", "distance": "250", "name": "ガスト" }
 ], "code": 200
 };

 // Mapクラスを生成
 // MapOptionsオブジェクトの設定して、Mapクラスの引数に指定します。
 var op = {
 zoom: 17,
 center: new google.maps.LatLng(35.7078118, 139.5773074),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"), op);

 //infowindowはひとつだけ。
 var infowindow = new google.maps.InfoWindow();

 for (var i = 0; i < json.spots.length; i++) {
 attachInfoWindow(i);
 }

 function attachInfoWindow(num) {
 var spot = json.spots[num];
 var obj = {
 position: new google.maps.LatLng(spot.lat, spot.lng),
 map: map
 };
 var marker = new google.maps.Marker(obj);

 google.maps.event.addListener(marker, 'click', function (e) {
 infowindow.content = '<p>' + spot.name + '</p>';
 infowindow.open(map, marker);
 });
 }
}
</script>

weed_7777さんのコメント
一発で動きました! ありがとうございます! http://weed777.sakura.ne.jp/wordpress/?p=128
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ