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.
コメントを投稿