例－４：カスタムコントロールの作成方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[あなたのAPIキー]&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//myButton クラスのコンストラクタ
function myButton() {}
//GControl クラスを継承する
myButton.prototype = new GControl();
//コントロールが地図に追加されたときに呼び出される
//主に初期化のために用いられる
myButton.prototype.initialize = function(map) {
//ボタンを格納するためのDivコンテナを作成
var container = document.createElement("div");
//ボタン作成
var myBtn = document.createElement("div");
myBtn.style.textDecoration = "underline";
myBtn.style.color = "#0000cc";
myBtn.style.backgroundColor = "white";
myBtn.style.font = "small Arial";
myBtn.style.border = "1px solid black";
myBtn.style.padding = "2px";
myBtn.style.marginBottom = "3px";
myBtn.style.textAlign = "center";
myBtn.style.width = "140px";
myBtn.style.cursor = "pointer";
//コンテナに追加
container.appendChild(myBtn);
//ボタンの中に文字を追加
myBtn.appendChild(document.createTextNode("myButton"));
//Dom の clickイベントが発生したら、処理を行う
GEvent.addDomListener(myBtn, "click", function() {
alert("これは自作ボタンです");
});
//コンテナを地図上に追加
map.getContainer().appendChild(container);
//コンテナDiv を返す
return container;
}
//位置が指定されなかったとき、コントロールの位置を決めます
myButton.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 15));
}
function load() {
if (GBrowserIsCompatible()) {
//地図を作成
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.677335,139.744613), 16);
//自作ボタンの追加
map.addControl(new myButton());
}
}
//ページがロードされたら、load 関数を実行して、地図を表示する
window.onload = load;
//ページを抜けるとき、メモリ開放
window.onunload = GUnload;
//]]>
</script>
</head>
<body >
<div id="map" style="width: 600px; height: 600px"></div>
</body>
</html>
