GoogleMapの吹き出しとマーカーリスト

なにがしたい？

• Gmap上にマーカーを表示して、そいつらに吹き出しを持たせたい
• リストをクリックすると、マップ上のマーカーに移動して吹き出しを表示させたい
• リストは長くなるので、スクロールできるようにしたい

まずはGmapの表示

# まずはGoogleから読み込む
echo $javascript->link(
'http://maps.google.com/maps?file=api&v=2&key='
.GMAPS_API_KEY,
false);

# 表示用のDivを用意する
<div id="map" style="width: 830px; height: 600px;">
</div>

マーカー表示の前にいろいろできるようにする

# Javascriptです
if(GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));

  // Control button
  map.addControl(new GLargeMapControl());

  // Type change button
  map.addControl(	new GMapTypeControl(),
    new GControlPosition(G_ANCHOR_BOTTOM_LEFT,
    new GSize(10, 10)));

  // Enable to scroll wheel zoom
  map.enableScrollWheelZoom();

  // Point of center
  map.setCenter(new GLatLng(35.658587, 139.745425), 6);
}

マーカーの表示

こんな感じでいける。

マーカーをクリックしたら吹き出しが出るようにする

これもこんな感じ。
イベントリスナーを追加する感じ。

複数のマーカーの表示

リストをクリックしたら吹き出しを表示する

Viewに渡されたデータをマーカーデータに変換するヘルパー