ズームコントロールいろいろ

スライダー、マップタイプボタンに加え、検索窓も出そろったところで、画面の基本機能追加にズームコントロールを設定してみましょ。

と言っても、ダブルクリックによるズームは初期値で有効になってますよね、でも本家のようにマウスホイールでグリグリするのが爽快なのだよ。

しかし！驚くべきことに、たった数行でそのすべては実現されてしまうのでした。さすがというかなんというか。。

まずデフォルトで有効にはなっているがダブルクリックのズームに関するAPI

// ダブルクリックズームの有効化
GMap2#enableDoubleClickZoom()

// ダブルクリックズームの無効化
GMap2#disableDoubleClickZoom()

// ダブルクリックズームが有効かどうか
GMap2#doubleClickZoomEnabled() : boolean

続いてなめらか〜にズームするようにする連続ズームに関するAPI。これはデフォルトでは無効です。

// 連続ズームの有効化
GMap2#enableContinuousZoom()

// 連続ズームの無効化
GMap2#disableContinuousZoom()

// 連続ズームが有効かどうか
GMap2#continuousZoomEnabled() : boolean

そしておまちかねのマウススクロールホイールでのズームに関するAPI。もちろんデフォルトは無効です。

// スクロールホイールズームの有効化
GMap2#enableScrollWheelZoom()

// スクロールホイールズームの無効化
GMap2#disableScrollWheelZoom()

// スクロールホイールズームが有効かどうか
GMap2#scrollWheelZoomEnabled() : boolean

さあ、眠いので超手抜き実装だ！

// ダブルクリックによるズームを有効にする
if (!map.doubleClickZoomEnabled()) {
    map.enableDoubleClickZoom();
}
// 滑らかな連続ズームを有効にする
if (!map.continuousZoomEnabled()) {
    map.enableContinuousZoom();
}
// マウスホイールのズームを有効にする
if (!map.scrollWheelZoomEnabled()) {
    map.enableScrollWheelZoom();
}

さあて、そしてサンプルはコチラ！

おおぉ！！グリグリできる！

さあ、次回あたりからはイベント系に入っていかなければね〜