Google Maps API　コントロールセットのカスタマイズ　-　ホームページ制作講座

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

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

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

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

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

[.................]ズームコントロール表示
ームコントロールは、次のいずれかの 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 バージョンでは変更される可能性があります。

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

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

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

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

...............................

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

デフォルトUIの無効化

...............................

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