Google Maps API - マップタイプの例

Google Maps API –マップタイプの例

Google Maps APIは4つのマップタイプをサポートしています。

ROADMAP –通常の道路/道路地図を表示します（デフォルトの地図タイプ）。
地形-地形情報に基づいて通常の道路/道路地図を表示します。
SATELLITE –衛星画像のみを表示します。
HYBRID –通常ビューと衛星ビューが混在し、衛星画像の上にストリートビュー/道路ビューを表示します。

Note
通常、「ROADMAP」または「HYBRID」のいずれかを使用します。「TERRAIN」および「SATELLITE」のユースケースはあまりありません。 s "。

1. マップタイプ

使用可能なすべてのマップタイプについては、このMapTypeId API referenceを参照してください。

次のようなGoogleマップの作成時に、マップタイプを変更できます。

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP   //change here
    };

    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

または、次のように動的に変更します。

    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

    map.setMapTypeId(google.maps.MapTypeId.HYBRID);

2. マップタイプの制御オプション

また、「マップタイプコントローラー」の位置とスタイルを変更できます。マップタイプコントローラーは、マップ上の小さなボックスまたはドロップダウンメニュー表示であるため、ユーザーはマップタイプを動的に変更できます。

図を参照してください：

google map controls

3マップタイプコントロールがサポートされています。

DEFAULT –デフォルトの表示オプションは、ウィンドウサイズなどの要因によって異なります。
DROPDOWN_MENU –ドロップダウンメニューにオプションを表示します。
HORIZONTAL_BAR –オプションをボタンとして表示し、水平に整列します。

このような制御スタイルを構成します。

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControlOptions: {
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      }
    };

さらに、マップタイプコントローラーを表示する場所をカスタマイズできます。このGoogle Map control position referenceで使用可能なすべての位置を参照してください。

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControlOptions: {
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
     position: google.maps.ControlPosition.BOTTOM_RIGHT
      }
    };

上記のコードスニペットでは、コントロールは右下に表示され、

3. マップタイプの例

Googleマップ（1600 Amphitheatre Parkway Mountain View、CA 94043）の場所をGoogleマップに表示する完全な例：

マップタイプ=ハイブリッド
マップタイプコントロール= DROPDOWN_MENU
マップタイプコントロールの位置= TOP_CENTER
地図上の場所を識別するマーカーを追加します。



Google Maps API - Map Type

結果

この例をダウンロードしてください。

TOC

Google Maps API - マップタイプの例