Google マップのコントロール

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

標準のGoogle Mapsを表示している場合、デフォルトのコントロールセットが提供されます：

  • 拡大（Zoom） - 地図の拡大レベルを制御するためのスライダーや「+/-」ボタンを表示
  • 平移（Pan） - 地図を移動するための平移コントロールを表示
  • 地図タイプ（MapType） - ユーザーが地図のタイプ（ルートマップと衛星画像）間で切り替えることを許可
  • ストリートビュー（Street View） - ストリートビューの小人アイコン（Pegman icon）を表示し、それを地図にドラッグしてストリートビューを有効にできます

Google Maps - もっとのコントロール

デフォルトのコントロールに加えて、Google Maps は以下も提供しています：

  • 縮尺（Scale） - 地図の縮尺要素を表示
  • 回転（Rotate） - 地図を回転するための小さな円形アイコンを表示
  • 概観地図（Overview Map） - 簡略表示の概観地図を表示し、より広範囲の現在の地図視口を反映

地図を作成する際に表示するコントロールを指定するか、setOptions() を呼び出して地図のオプションを変更できます。

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

デフォルトのコントロールをオフにすることをお勧めします。

これに対して、地図の disableDefaultUI 属性（地図のオプションオブジェクト内）を true に設定してください：

インスタンス

var mapOptions {disableDefaultUI: true}

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

一部のコントロールはデフォルトで地図に表示されます；他のものは表示されませんが、設定すると表示されます。

地図オプションオブジェクト内で、地図に追加または削除するコントロールを指定してください。

コントロールを true に設定すると表示されます - false に設定すると非表示になります。

この例では、すべてのコントロールをオープンしています：

インスタンス

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

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

一部の地図コントロールは設定可能です。

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

例えば、zoomControlOptions フィールドでは、Zoom コントロールのオプションを変更するために指定されます。zoomControlOptions フィールドには、以下が含まれる可能性があります：

  • google.maps.ZoomControlStyle.SMALL - ミニズームコントロールを表示（+と-ボタンのみ）
  • google.maps.ZoomControlStyle.LARGE - 標準のズームスライダーコントロールを表示
  • google.maps.ZoomControlStyle.DEFAULT - デバイスと地図のサイズに応じて最適なズームコントロールを選択

インスタンス

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

注意：コントロールを変更するには、まずコントロールを有効にしてください（true に設定します）。

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

mapTypeControlOptions フィールドでは、コントロールのオプションを変更するために指定されます。mapTypeControlOptions フィールドには、以下が含まれる可能性があります：

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 各地図タイプごとにボタンを表示
  • 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
}