最近作っている特設サイトの一つに「鈴鹿サーキット 撮影マップ」があります。「マップ」と言うからには「地図」を付けたくなり「Google Maps」を設置してみました。地図を付けたら撮影ポイントを示したくなり「マーカー」を付けました。そしてマーカーをクリックしたらその撮影ポイントの写真が表示されたら面白いかもと思い「撮影マップ」を作ってみました。

マーカーの表示まではすんなり完了。マーカーをクリックしてみたら上手く表示された。さて、複数個設置してみたら………ここからが上手くいきません。相変わらず“ちょっと使うだけ”ならとても簡単に扱える「Google API」ですが、ちょっと違うことをしようとすると難航します。(理解せずに使うというのがダメということでしょうが)

で、解決策を探してみました。

→ 勉強したことのまとめ : 非同期に取得したXMLファイルを基に、Googleマップに複数個のマーカーを配置する

「GEvent.addListener(marker, 'click', function() { });」を別の関数にして呼び出せば解決するらしい。

ということでやってみたら上手くいきました。

  function load() {
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(34.843905,136.534374), 15);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      var point = new GLatLng(34.839886,136.543421);
      var html = "<img src='./img/i20080725-1.jpg' width='180' height='135' alt='' /><br /><a href='./20080725-1.html'>第1コーナー</a>";
      var marker = createMarker(point, html);
      map.addOverlay(marker);
      var point = new GLatLng(34.838996,136.542356);
      var html = "<img src='./img/i20080725-3.jpg' width='180' height='135' alt='' /><br /><a href='./20080725-3.html'>第2コーナー</a>";
      var marker = createMarker(point, html);
      map.addOverlay(marker);
～～以下省略～～
    }
  }
  function createMarker(point, html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
    });
    return marker;
  }