Googleマップの吹き出しにBLOGRANGERパーツを表示する

「GoogleマップとBLOGRANGERパーツでレジャースポット案内を作る」で作ったレジャースポット案内は、「Googleマップ」と「BLOGRANGERパーツ」が連携しているといいつつも、GoogleマップとBLOGRANGERパーツを左右に並べたレイアウトのためマッシュアップ感が低いといわざるをえません。

そこでGoogleマップとBLOGRANGERパーツが統合して見えるように、Googleマップの吹き出し(情報ウィンドウともいう)にBLOGRANGERパーツを表示するように改良してみました。またついでにレジャースポットを10ヶ所ほど追加(合計15ヶ所)してにぎやかにしてみました。

↓こんな感じです。前作に比べてマッシュアップ感が向上したと思いますがいかがでしょうか。

View example

改造したポイントをお伝えしておきます。

次のとおり、まとめてレジャースポットを定義するようにしました。レジャースポットの緯度、経度、そしてBLOGRANGERパーツのブックマークURLを指定します。今後、新しいレジャースポットを追加するときは、末尾に1行を追加するだけでOKです。

var spots = [
  // {lat: 緯度, lng: 経度, url: ブックマークURL}
  {lat: 35.660347, lng: 139.729121, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1510'}, // 六本木ヒルズ
  {lat: 35.665246, lng: 139.712319, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1556'}, // 表参道ヒルズ
    …
  {lat: 35.676368, lng: 139.699359, url: 'http://ranger.labs.goo.ne.jp/rpc/partsview.php?key=1590'}  // 明治神宮
];

マーカーをクリックしたとき、吹き出しの中にBLOGRANGERパーツを表示(GMarker.openInfoWindowHtml)するようにしました。BLOGRANGERパーツはiframeを使って表示します。iframeのsrcにはBLOGRANGERパーツのブックマークURLを指定します。

function createMarker(spot) {
  var marker = new GMarker(new GLatLng(spot.lat, spot.lng));
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml('<iframe '
      + 'src="'+spot.url+'" '
      + 'width="320" height="200" frameborder="0" '
      + 'marginwidth="2" marginheight="2" '
      + '></iframe>'
    );
  });
  return marker;
}

レジャースポットの定義に基づいて繰返しマーカーを追加します。

  for (var i=0; i<spots.length; i++)
    map.addOverlay(createMarker(spots[i]));

最後におまけです。地図の右下にズームアウトした小さな地図を表示するようにしました。この小さな地図を使うと、広域の視点から地図を操作できます。

  map.addControl(new GOverviewMapControl());