Googleマップのコントロールセット
グーグルマップ - デフォルトのコントロールセットが設定されています:
Googleマップ - デフォルトのコントロールセットが設定されています:
標準のGoogleマップを使用する場合は、次のように、そのデフォルト設定は次のとおりです。
- .Zoom-は、ズームレベルのマップを制御するためのスライダーバーを表示します
- .PPan-地図表示にパンマップの四隅をクリックして、平らな椀状のコントロールです
- .MapType-は、ユーザーがマップタイプ(ロードマップとsatallite)スイッチの間で選択することができます
- .StreetView-あなたがストリートビューを開くには、地図上のポイントにドラッグすることができ、ペグマンアイコンとして表示されます。
Googleマップ - 複数の制御セット
上記のデフォルトのコントロールセットに加えて、グーグルも:
- .Scale-表示地図の縮尺
- アイコンの小さな円周を表示.Rotate-は、マップを回転させることができます
- 広域マップの観点から.verview MAP-平面図
あなたはオプションを設定するかはsetOptionsを呼び出すことによって、表示されるコントロールのセットを指定することができますマップを作成するときに()のオプションを設定するマップを変更します。
Googleマップ - デフォルトのコントロールセットをオフにします
あなたは、コントロールのデフォルトセットをオフにすることができます。
デフォルトのコントロールセットをオフにするには、disableDefaultUI真をマップするプロパティを設定します。
Googleマップ - 開くように設定されたすべてのコントロール
他はありませんが、あなたがそれらを設定しない限り、一部のコントロールは、地図上のデフォルトの表示を設定します。
それは目に見える真にする制御を設定 - それを非表示にするにはfalseにコントロールを設定します。
次の例では、すべてのコントロール開かれています:
例
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
»をお試しください
Googleマップ - コントロールセットを変更
いくつかのマップコントロールは設定可能です。 制御オプションフィールドを開発することによって設定された制御を変更します。
例えばFは、ズームコントロールオプションを変更することがzoomControlOptionsを指定します。 zoomControlOptionsは、次の3つのオプションが含まれています。
- .google.maps.ZoomControlStyle.SMALL-表示はズーム制御を最小限に抑えます
- .google.maps.ZoomControlStyle.LARGE-標準ズームスライドショーコントロール
- 最も適切なコントロールを選択し、ベースの機器やマップのサイズを.google.maps.ZoomControlStyle.DEFAULT-
例
zoomControlOptions : {
style : google . maps . ZoomControlStyle . SMALL
}
»をお試しください
注意:あなたがコントロール、最初のターンのコントロールを変更する必要がある場合(trueに設定)。
別のコントロールがマップタイプコントロールです。
マップタイプコントロールは、次のいずれかのstyleオプションで表示されることがあります。
- Googleマップに示されるようにgoogle.maps.MapTypeControlStyle.HORIZONTAL_BARは、水平バーにコントロールボタンのセットとして表示されます。
- google.maps.MapTypeControlStyle.DROPDOWN_MENU、ドロップダウンメニューからマップの種類を選択することができ、単一のボタンコントロールを表示します。
- google.maps.MapTypeControlStyle.DEFAULT、画面サイズに依存しており、APIの将来のバージョンで変更される可能性があり、「デフォルト」の動作を、表示します。
例
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
»をお試しください
同様に、あなたがコントロールを指定された場所のたControlPositionプロパティを使用することができます。
例
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}
»をお試しください
Googleマップ - 設定したカスタムコントロール
Clickイベントのためにロンドンに戻るには、カスタムコントロールを作成します(マップがドラッグされている場合):
例
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);
»をお試しください