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


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

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/02/08 03:41:35
  • 終了:2012/02/08 10:59:07

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/02/08 06:30:44

ポイント100pt

同時には 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>
id:weed_7777

一発で動きました!
ありがとうございます!
http://weed777.sakura.ne.jp/wordpress/?p=128

2012/02/08 10:58:52

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません