Googleマップコントロール


Googleマップ-デフォルトのコントロール

標準のGoogleマップを表示する場合、デフォルトのコントロールセットが付属しています。

  • ズーム-スライダーまたは「+/-」ボタンを表示して、マップのズームレベルを制御します
  • パン-マップをパンするためのパンコントロールを表示します
  • MapType-ユーザーがマップタイプ(ロードマップと衛星)を切り替えることができます
  • ストリートビュー-ストリートビューを有効にするためにマップにドラッグできるペグマンアイコンを表示します

Googleマップ-その他のコントロール

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

  • 縮尺-マップの縮尺要素を表示します
  • 回転-マップを回転できる小さな円形のアイコンを表示します
  • 概要マップ-現在のマップビューポートをより広い領域に反映したサムネイル概要マップを表示します

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


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

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

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

var mapOptions {disableDefaultUI: true}


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

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

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

コントロールをtrueに設定して表示します-コントロールをfalseに設定して非表示にします。

次の例では、すべてのコントロールを「オン」にします。

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

Googleマップ-コントロールの変更

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

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

たとえば、ズームコントロールを変更するためのオプションは、zoomControlOptionsフィールドで指定されます。ZoomControlOptionsフィールドには次のものが含まれる場合があります。

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

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

注:コントロールを変更する場合は、必ず最初にコントロールを有効にしてください(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
}

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

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