最新のWeb開発のチュートリアル
 

Googleマップコントロール


グーグルマップ - デフォルトのコントロールが設定されています:


Googleマップ - デフォルトコントロール

標準のGoogleマップを示す場合には、デフォルトのコントロールセットが付属しています:

  • ズーム-スライダーを表示したり"+/-"ボタンを地図のズームレベルを制御するために、
  • パン - 地図をパンニングするためのパンコントロールを表示します
  • マップタイプ-マップタイプ間でユーザーの切り替えができます(roadmap and satellite)
  • ストリートビュー - ストリートビューを有効にするには、マップにドラッグすることができペグマンのアイコンが表示されます

Googleマップ - その他のコントロール

デフォルトのコントロールに加えて、Googleマップもあります。

  • スケール - 地図のスケール要素を表示します
  • 回転 - あなたがマップを回転させることができ、小さな円形のアイコンが表示されます
  • 概要地図は、 - より広い領域内の現在のマップビューポートを反映サムネイル概観マップを表示します

あなたは、マップの作成時に表示するように制御するかを指定することができます(inside MapOptions)または呼び出すことでsetOptions()マップのオプションを変更することを。


Googleマップ - デフォルトコントロールを無効にします

代わりに、デフォルトのコントロールをオフにすることもできます。

これを行うには、trueに(マップoptionsオブジェクト内)地図のdisableDefaultUIプロパティを設定します。


Googleマップ - すべてのコントロールをオンにします

一部のコントロールはデフォルトで地図に表示され、 あなたがそれらを設定しない限り、他のものは表示されませんしながら。

地図からコントロールを追加または削除は、マップオプションオブジェクトで指定されています。

それを隠すために虚偽にコントロールを設定する - それが見えるようにするには、trueに制御を設定します。

次の例では、ターン"on"すべてのコントロール:

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
»それを自分で試してみてください

Googleマップ - 変更コントロール

マップコントロールのいくつかは設定可能です。

コントロールは、コントロール・オプション・フィールドを指定することによって変更することができます。

たとえば、ズームコントロールを変更するためのオプションがzoomControlOptions]フィールドで指定されています。 zoomControlOptionsフィールドが含まれる場合があります。

  • google.maps.ZoomControlStyle.SMALL - ミニズームコントロールが表示されます(のみ+と - ボタン)
  • google.maps.ZoomControlStyle.LARGE - 標準ズームスライダコントロールを表示します
  • google.maps.ZoomControlStyle.DEFAULT - デバイスとマップサイズに基づいて最適なズームコントロールを選びます

zoomControl:true,
zoomControlOptions: {
    style:google.maps.ZoomControlStyle.SMALL
}
»それを自分で試してみてください

Note:あなたがコントロールを変更する場合は、常に最初のコントロールを有効(set it to true)

別の設定可能な制御は、マップタイプコントロールです。

コントロールを変更するためのオプションがmapTypeControlOptions]フィールドで指定されています。 mapTypeControlOptionsフィールドが含まれていてもよい::

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 各マップタイプのディスプレイ1のボタン
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - ドロップダウンメニューから選択マップタイプ
  • google.maps.MapTypeControlStyle.DEFAULT -表示される"default"動作を(depends on screen size)

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
}
»それを自分で試してみてください

Googleマップ - カスタムコントロール

常に戻ってロンドンに表示されますカスタムコントロールを作成し、クリックされたとき(if the map is dragged)

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);
»それを自分で試してみてください

Googleマップは、 - 参照を制御します

GoogleマップのAPIリファレンス