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

投稿日: 2019-11-05 2019-11-05
タグ: google map, map types

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

ROADMAP – 通常の通り/道路地図（デフォルトの地図タイプ）を表示します.
地形 – 地形情報に基づいて通常の通り/道路地図を表示します.
衛星 – 衛星画像のみを表示します.
ハイブリッド – ノーマルビューとサテライトビューを混在させ、通り/道路ビューを表示する

衛星画像の上に表示されます。

1.地図タイプ

利用可能なすべてのマップタイプについては、このhttp://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeId[MapTypeId APIリファレンス]を参照してください。

次のように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マップコントロール、title = "google-map-control"、width = 486、height = 157

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
      }
    };

さらに、マップタイプコントローラーを表示する場所をカスタマイズし、このhttp://code.google.com/apis/maps/documentation/javascript/reference.html#ControlPosition[Googleマップコントロールの位置の参照]で利用可能なすべての位置を参照してください。

    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マップ（Googleマップの1600 Amphitheatre Parkway Mountain View、CA 94043）の場所を表示する完全な例:

マップタイプ=ハイブリッド
マップタイプコントロール= DROPDOWN__MENU
マップタイプの制御位置= TOP__CENTER
マップ上の場所を識別するマーカーを追加します.

<html>
<head>
<title>Google Maps API - Map Type</title>
<style type="text/css">
div#map__container{
    width:100%;
    height:350px;
}
</style>
<script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  function loadMap() {
    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN__MENU,
        position: google.maps.ControlPosition.TOP__CENTER
      }
    };
    var map = new google.maps.Map(document.getElementById("map__container"),myOptions);

    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"Google Office!"
    });

  }
</script>
</head>

<body onload="loadMap()">
<div id="map__container"></div>
</body>

</html>