nxt web site

Googleマップカスタマイズ3回目は、地図にコントロールボタンを表示する方法です。

前回作成した地図を拡大・縮小したり、航空写真にするためのボタンをつけます。

■大きいコントロールボタン
4方向の移動ボタンと、ズームイン、ズームアウトとズームスライダーを表示します。
GLargeMapControlを作成し、addControlで追加します。
4つの外向き矢印の中心にある内向き矢印のボタンは、元の状態に戻すボタンです。地図を移動させてもそれをクリックすれば
コードの中でセットした中心とズームレベルに戻ります。
→サンプル

■小さいコントロールボタン
4方向の移動ボタンと、ズームイン、ズームアウトボタンを表示します。
GSmallMapControlを作成し、addControlで追加します。
少し小さくてスライダーまで入らない地図におすすめです。
→サンプル

■マップ切り替えコントロールボタン
地図と衛星写真切り替えボタンを表示します
GMapTypeControlを作成し、addControlで追加します。
これで、もれなく3つのボタンが追加されます。（地図、航空写真、地図＋写真）
→サンプル

上記のコントロールボタンはGoogleのデフォルトのボタンを表示していましたが、
このボタンをカスタマイズする方法を紹介します。
ホームタウン・ホームページでは、「好きな町ランキング」で5位以内に入った町の都市ページに
小さな地図を表示していきます。
この地図のサイズが180×180（px）と小さいため、デフォルトのマップ切り替えのボタンが入りません。
そのため、小さなボタンを作成して表示しています。

■コントロールボタンのカスタマイズ
手順としては、表示したいボタンを設定してから、地図にaddControlで追加します。
例えば、航空写真への切り替えボタンを付けたい時は

下記のように、ボタンの設定をします。
var setTypePDiv = document.createElement("div");
this.setButtonStyle_(setTypePDiv);
container.appendChild(setTypePDiv);
//ボタンの名前
setTypePDiv.appendChild(document.createTextNode("写真"));
//ボタンをクリックした時の動きを設定
GEvent.addDomListener(setTypePDiv, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});

その後で、ボタンのスタイルを設定します。
MapTypeSetControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "1px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "2em";
button.style.cursor = "pointer";
}

設定したボタンを地図に追加します。
map.addControl(new MapTypeSetControl());

→サンプル

これでGoogleマップのカスタマイズについては終わりです。
GoogleAPIを使って、いろいろなマップを作ってみませんか？