Google Mapsのコントロールオプション

Google Mapを使っていると見かけるストリートビューや航空写真への切り替え、拡大縮小のボタンなどこれらはまとめてコントロールと呼ばれています。

これらはオプションを指定してあげると、アイコンの表示非表示、表示場所の切り替えなどが簡単に出来ます。

各コントロールの名称とその切替方法を紹介します。

zoomControl

ズームコントロールの有効/無効を指定します。このコントロールはデフォルトでマップの右下辺りに表示されます。

mapTypeControl

マップタイプ（地図、衛星写真など）の切り替えに使うマップタイプコントロールの有効/無効を指定します。このコントロールはデフォルトでマップの左上に表示されます。

streetViewControl

ストリートビューのパノラマ画像を表示する際に使うペグマンコントロールの有効/無効を指定します。このコントロールはデフォルトでマップの右下辺りに表示されます。

rotateControl

斜め45度画像の向きを制御する回転コントロールの有効/無効を指定します。デフォルトでは、現在表示している地域、ズーム レベル、マップタイプに対応する 45 度画像が存在すれば、このコントロールは表示されます。

scaleControl

シンプルなマップスケールを提供するスケール コントロールの有効/無効を指定します。デフォルトでは、このコントロールは非表示です。有効にすると、必ずマップの右下に表示されます。

では次に表示非表示の切り替えです。コントロールは生成するマップのMapOptionsに記述していきます。

function initMap() {
  var mapOptions = {
    zoom: 4,
    center: {lat: -33, lng: 151},
    //ここからコントロールの設定
    zoomControl: boolean,
    mapTypeControl: boolean,
    scaleControl: boolean
  }
  var map = new google.maps.Map(document.getElementById("map"),
       mapOptions);
}

booleanにそれぞれtrue or falseを入れていけば簡単に設定できます。

次にコントロールの表示位置です。

function initMap() {
  var mapOptions = {
    zoom: 4,
    center: {lat: -33, lng: 151},
    //ここからコントロールの設定
    zoomControl: true,
    zoomControlOptions: {
      //LEFT_BOTTOMで左下に指定
      position: google.maps.ControlPosition.LEFT_BOTTOM
    },
    mapTypeControl: boolean,
    scaleControl: boolean
  }
  var map = new google.maps.Map(document.getElementById("map"),
       mapOptions);
}

簡単ですね！ コントロールの公式リファレンス