Google Maps Controls

❮ 前章へ次章へ ❯

Google map - デフォルトのコントロールセット付き：

Google Maps - デフォルト・コントロール

標準の Google マップを表示すると、デフォルトのコントロール・セットが付いています：

Zoom - マップのズームレベルを制御するスライダまたは "+/-" ボタンを表示する
Pan - マップをパンするためのパンコントロールを表示する
MapType - マップ・タイプ（地図と航空写真）を切り替え
Street View - ストリートビューを有効にするためにマップにドラッグできるペグマン・アイコンを表示する

Google Maps - 他のコントロール

デフォルトのコントロールに加えて、Google マップには次の機能があります：

Scale - マップのスケール要素を表示する
Rotate - マップを回転できる小さな円形のアイコンを表示する
Overview Map - 広い領域内の現在のマップビューポートを反映したサムネール概略マップを表示する

マップの作成時に表示するコントロールを（MapOptions 内に）指定するか、 setOptions() を呼び出してマップのオプションを変更するかを指定できます。

Google Maps - デフォルトのコントロールを無効にする

デフォルトのコントロールをオフにすることもできます。

これを行うには、Map オプション・オブジェクト内の disableDefaultUI プロパティに true を設定します：

例

var mapOptions {disableDefaultUI: true}

Try it Yourself »

Google Maps - すべてのコントロールをオンにする

一部のコントロールは、デフォルトでマップに表示されますが、設定しない限り他のものは表示されません。

マップへのコントロールの追加または削除は、マップ・オプション・オブジェクトに指定します。

表示するには、コントロールに true を、非表示にするには、コントロールに false を設定します。

次の例は、すべてのコントロールを "on" にします：

例

var mapOptions {
    panControl: true,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    rotateControl: true
}

Try it Yourself »

Google Maps - コントロールの変更

いくつかのマップコントロールは設定可能です。

コントロールは、コントロール・オプションのフィールドを指定することによって変更できます。

例えば、ズーム・コントロールを変更するオプションは、zoomControlOptions フィールドで指定します。 zoomControlOptions フィールドには次のものが含まれます：

google.maps.ZoomControlStyle.SMALL - ミニ・ズームコントロールを表示します（+ ボタンと - ボタンのみ）
google.maps.ZoomControlStyle.LARGE - 標準のズーム・スライダ・コントロールを表示します
google.maps.ZoomControlStyle.DEFAULT - デバイスとマップのサイズに基づいて最適なズームコントロールを選択します

例

zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}

Try it Yourself »

注: コントロールを変更する場合、コントロールを常に有効に（true を設定）してください。

もう1つの設定可能なコントロールは、MapType コントロールです。

コントロールを変更するオプションは、mapTypeControlOptions フィールドで指定します。 mapTypeControlOptionsフィールドには次のものが含まれます：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR - マップタイプごとに1つのボタンを表示します
google.maps.MapTypeControlStyle.DROPDOWN_MENU - プルダウンメニューからマップタイプを選択します
google.maps.MapTypeControlStyle.DEFAULT - 「デフォルト」の動作を表示します（画面サイズによって異なります）

例

mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Try it Yourself »

ControlPosition プロパティを使用して、コントロールを配置することもできます：

例

mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}

Try it Yourself »

❮ 前章へ次章へ ❯