google map api v3で、1つの地図に複数のマーカー+吹き出しを表示

いろいろ加工できるgoogle mapですが、たとえばCMSサイトで、複数店舗の情報を一つのgoogle mapに表示させたい、というようなケースはよくある。その備忘メモ。

※2012/3/21追記
(mapが表示されない、というご指摘があったのでサンプル追記します)
サンプルはこちら

① headタグ内に、Maps API JavaScript の呼び出しを記述

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

② bodyタグに、地図を出力する div要素(id=’map’)を記述

cssで、適当に表示サイズを指定する。

<!--map-->
<div id="map" style="width: 600px; height: 400px;"></div>
<!--map-->

③ 上記div要素(id=’map’)の下に、表示させる内容のパラメータを記述

div要素の上に、以下のscriptを配置すると、なぜか表示されません。
ソース内の配置も、①→②→③の順番に記述が必要です。

<script type="text/javascript">
  function attachMessage(marker, msg) {
    google.maps.event.addListener(marker, 'click', function(event) {
      new google.maps.InfoWindow({
        content: msg
      }).open(marker.getMap(), marker);
    });
  }
// 位置情報と表示データの組み合わせ
  var data = new Array();//マーカー位置の緯度経度
  data.push({position: new google.maps.LatLng(35.681382, 139.766084), content: '東京駅'});
  data.push({position: new google.maps.LatLng(35.690921, 139.700258), content: '新宿駅'});

  var myMap = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,//地図縮尺
    center: new google.maps.LatLng(35.69106, 139.733989),//地図の中心点
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  for (i = 0; i < data.length; i++) {
    var myMarker = new google.maps.Marker({
      position: data&#91;i&#93;.position,
      map: myMap
    });
    attachMessage(myMarker, data&#91;i&#93;.content);
  }
</script>

11~12行目で、マーカーを置きたい地点の緯度経度、吹き出しに表示させるテキストを明記します。
さらにマーカーを増やす場合は、この「data.push~」から始まる一行を足す。

住所などから緯度経度を検索するのは↓こちらから
http://www.geocoding.jp/

15行目で、地図のデフォルトの縮尺を指定。
16行目で、地図の中心点をどこに置くかを、緯度経度で指定。

さらに詳しく勉強するには、googleのチュートリアルが充実してます。

【2012/5/25追記】複数マーカーを表示させながら、クリックすると一つだけ吹き出し(情報ウィンドウ)を表示

クリックで一つだけ吹き出し(情報ウィンドウ)サンプル

▼こちらのサイトで、その方法が紹介されていました。ありがとうございます。
情報ウィンドウ|Google Maps JavaScript API v3|Ajax|PHP & JavaScript Room

Google Maps APIプログラミング入門 改訂2版
勝又雅史
アスキー・メディアワークス
売り上げランキング: 18,798
スポンサーリンク

シェアする

フォローして更新を受け取る

スポンサーリンク

コメント

  1. たかぴょろ より:

    初めまして。突然のコメント失礼します。
    これは、ポイントの追記が手軽にできるのがいいです。
    この場合、×マークを押さないと、インフォウィンドウが閉じませんが、インフォウィンドウを常に一つ表示させる(次のポイントをクリックしたら、前のウィンドウが閉じる。または、マップ上をクリックしたら、ウィンドウが閉じる)には、どうすればいいのか、ご教授お願いできますでしょうか?

  2. よーすい より:

    たかぴょろ さんと同じく、
    インフォウィンドが重なって表示されることについて
    解決方法がありましたら教えてください。

  3. htanaka より:

    よーすいさん
    ご質問ありがとうございます。
    たかぴょろさんからもリクエストいただいたままですね。。
    調べてみますので、いましばらくお待ちください。

  4. htanaka より:

    ご要望の方法ですが、他のサイトで紹介されていました。
    サンプルとあわせて、記事に追記しました。

  5. […] http://tanaka8.com/2011/11/google-map-markers/ 複数のマーカー、ピンを置きたいときに参考になりました。 […]