読者です 読者をやめる 読者になる 読者になる

ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

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の無効化

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

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

記事の詳細 》 GoogleMapsAPIを利用したホームページ制作