Google Maps API コントロールセットのカスタマイズ

Google Maps APIのコントロールセット、地図の左上にでている拡大縮小のボタン類などの表示・非表示、有効・無効などのカスタマイズのまとめです。

■コントロールセットの表示内容を個別設定する

コントロールセットの個別表示は以下の設定で可能です。表示・非表示、有効・無効のカスタマイズは各プロパティーのtrueで表示・有効、falseで非表示・無効に設定することができます。

[streetViewControl] ストリートビューの有効・無効の設定。falseでペグマンが非表示・無効となる。

[panControl] 移動コントロール表示制御

[zoomControl]ズームコントロール表示
ーム コントロールは、次のいずれかの style オプションで表示されます:

google.maps.ZoomControlStyle.SMALL: ミニズーム コントロールが表示されます。このコントロールは、[+] ボタンと [-] ボタンだけで構成されています。このスタイルは小さな地図に適しています。タッチ パネル端末では、このコントロールは [+] ボタンと [-] ボタンで表示され、タッチ イベントに応答します。
google.maps.ZoomControlStyle.LARGE: 標準のズーム スライダ コントロールが表示されます。タッチ パネル端末では、このコントロールは [+] ボタンと [-] ボタンで表示され、タッチ イベントに応答します。
google.maps.ZoomControlStyle.DEFAULT: 地図を表示する端末に応じて、地図のサイズと適切なズーム コントロールが選択されます。

MapType コントロールは、次のいずれかの style オプションで表示されます:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR: Google マップのように、コントロールが水平バーの中のボタンとして並べられます。
google.maps.MapTypeControlStyle.DROPDOWN_MENU: 1 つのボタン コントロールのみが表示され、マップ タイプをプルダウン メニューで選択することができます。
google.maps.MapTypeControlStyle.DEFAULT: 画面サイズに応じた「デフォルト」の設定に従って表示されますが、将来の API バージョンでは変更される可能性があります。

[scaleControl]スケールボタンの表示・非表示

[mapTypeControl]マップタイプ表示設定

■コントロールセットを細かくカスタマイズする場合

Google Maps JavaScript API v3
ディベロッパーガイド コントロール

https://developers.google.com/maps/documentation/javascript/controls?hl=ja

■デフォルトのコントロールセットを無効・非表示にする設定

デフォルトUIの無効化

disableDefaultUI: true,

を追記してコントロールセットを非表示・無効にできるので、個別にコントロールセットを指定して表示させることも可能です。