GoogleマップとBLOGRANGERパーツでレジャースポット案内を作る

「googleマップ」と「BLOGRANGER 2.0」のBLOGRANGERパーツを使って、東京近郊のレジャースポット案内を作ってみました。↓こんな感じです。

View example

googleマップにレジャースポットのマーカーを配置しています。そのマーカーをクリックすると、レジャースポットの周辺地図を噴出しに表示します。さらにBLOGRANGERパーツを使って、ブログ界でのレジャースポットへの感想を右側に表示します。

GoogleマップとBLOGRANGERパーツでレジャースポット案内を作る手順は次のとおりです。

はじめにBLOGRANGER 2.0でBLOGRANGERパーツを作ります。ここでは「感想を選ぶ」を使って「六本木ヒルズ」「表参道ヒルズ」「東京ディズニーランド」のレジャースポットのパーツを作りました。

 次にレジャースポットのBLOGRANGERパーツを次のようにWEBページに貼り付けます。パーツはdiv要素のidで識別できるようにしておきます。またパーツを意味するclassを付与し、はじめはstyleで非表示としておきます。

<div id="roppongihills" class="blogranger" style="display: none;">
<script type="text/javascript" src="http://ranger.labs.goo.ne.jp/rpc/api.php"></script>
<script type="text/javascript" src="http://ranger.labs.goo.ne.jp/rpc/parts.php?key=1510"></script>
<noscript>
<a title="by BLOGRANGER" href="http://ranger.labs.goo.ne.jp/" target="_blank">
<img style="border: 0;" alt="by BLOGRANGER" 
  src="http://ranger.labs.goo.ne.jp/rpc/image/promote.gif" /></a>
</noscript>
</div>

<div id="omotesandohills" class="blogranger" style="display: none;">
  …
</div>

<div id="tokyodisneyresort" class="blogranger" style="display: none;">
  …
</div>

googleマップにマーカーを配置します。

  map.addOverlay(createMarker(new GLatLng(35.660347, 139.729121), 'roppongihills'));
  map.addOverlay(createMarker(new GLatLng(35.665246, 139.712319), 'omotesandohills'));
  map.addOverlay(createMarker(new GLatLng(35.634017, 139.878595), 'tokyodisneyresort'));

googleマップのマーカーを作成し、clickイベントの関数を登録しています。マーカーをクリックすると、BLOGRANGERパーツをすべて非表示(Element.hide)にした後、該当するBLOGRANGERパーツを表示(Element.show)します。つまり、マーカーをクリックするごとにBLOGRANGERパーツが切り替わります。続けてマーカー周辺の拡大地図を噴出しに表示(GMarker.showMapBlowup)します。

function createMarker(point, element) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, 'click', function() {
    var elements = document.getElementsByClassName('blogranger');
    elements.each(function(element) {
      Element.hide(element);
    });
    Element.show(element);
    marker.showMapBlowup(15);
  });
  return marker;
}

これで完了です。

レジャースポットを増やしていくのは簡単ですね。BLOGRANGERパーツを作ってgoogleマップにマーカーを配置していきます。ただBLOGRANGERパーツをたくさん貼り付けると、だんだんWEBページが表示されるまで時間がかかるようになります。その時間が気になるようなら別の仕組みを考えないといけませんね。