2007年6月9日

Google Mapsにカスタムボタンを配置

このマップの右上のようにカスタムボタンを配置したかったけど、なかなか良いサンプルが見つからなくて苦労した。Custom Map Controlsにもサンプルあるけど、少し冗長に思えたので、エッセンスを踏まえて完成したのが下のソース。

<div id="testMap" style="width:500px;height:200px;"></div>

<script>
  //地図の作成と表示
  var map = new GMap2(document.getElementById("testMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);

  //ボタンの作成
  pMBlink=document.createElement("img");
  pMBlink.src=
     "http://genisgen.googlepages.com/markersMap.png";
  pMBlink.style.border="0px";
  pMBlink.style.cursor="pointer";
  pMBlink.title="photoMap Browserを表示";
  GEvent.addDomListener(pMBlink, "click", function() {
    alert("Clicked!");
  });

  //ボタンの表示
  var pos = new GControlPosition(
    G_ANCHOR_TOP_RIGHT, new GSize(1,29)
  );
  pos.apply(pMBlink);
  map.getContainer().appendChild(pMBlink);
</script>

1 件のコメント:

匿名 さんのコメント...

I should notify my friend about your post.