Latest web development tutorials

Googleマップのコントロールセット

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


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

標準のGoogleマップを使用する場合は、次のように、そのデフォルト設定は次のとおりです。

  • .Zoom-は、ズームレベルのマップを制御するためのスライダーバーを表示します
  • .PPan-地図表示にパンマップの四隅をクリックして、平らな椀状のコントロールです
  • .MapType-は、ユーザーがマップタイプ(ロードマップとsatallite)スイッチの間で選択することができます
  • .StreetView-あなたがストリートビューを開くには、地図上のポイントにドラッグすることができ、ペグマンアイコンとして表示されます。

Googleマップ - 複数の制御セット

上記のデフォルトのコントロールセットに加えて、グーグルも:

  • .Scale-表示地図の縮尺
  • アイコンの小さな円周を表示.Rotate-は、マップを回転させることができます
  • 広域マップの観点から.verview MAP-平面図

あなたはオプションを設定するかはsetOptionsを呼び出すことによって、表示されるコントロールのセットを指定することができますマップを作成するときに()のオプションを設定するマップを変更します。


Googleマップ - デフォルトのコントロールセットをオフにします

あなたは、コントロールのデフォルトセットをオフにすることができます。

デフォルトのコントロールセットをオフにするには、disableDefaultUI真をマップするプロパティを設定します。

disableDefaultUI:true

»をお試しください


Googleマップ - 開くように設定されたすべてのコントロール

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

それは目に見える真にする制御を設定 - それを非表示にするにはfalseにコントロールを設定します。

次の例では、すべてのコントロール開かれています:

panControl:true,
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-

zoomControl : true ,
zoomControlOptions
: {
style
: google . maps . ZoomControlStyle . SMALL
}

»をお試しください

注意:あなたがコントロール、最初のターンのコントロールを変更する必要がある場合(trueに設定)。

別のコントロールがマップタイプコントロールです。

マップタイプコントロールは、次のいずれかのstyleオプションで表示されることがあります。

  • Googleマップに示されるようにgoogle.maps.MapTypeControlStyle.HORIZONTAL_BARは、水平バーにコントロールボタンのセットとして表示されます。
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU、ドロップダウンメニューからマップの種類を選択することができ、単一のボタンコントロールを表示します。
  • google.maps.MapTypeControlStyle.DEFAULT、画面サイズに依存しており、APIの将来のバージョンで変更される可能性があり、「デフォルト」の動作を、表示します。

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マップ - 設定したカスタムコントロール

Clickイベントのためにロンドンに戻るには、カスタムコントロールを作成します(マップがドラッグされている場合):

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 Maps APIのリファレンスマニュアル