【Maps JavaScript API】4つの基本マップタイプについて

今回はGoogle Maps JavaScript APIで使用する、4つの基本マップタイプについて解説したいと思います。
マップタイプについては、以前に「【Googleマップ】マップタイプの種類を変更する」でも解説していますので、マップタイプという言葉を初めて聞く人は、まずGoogleマップのマップタイプについて理解しましょう。

このAPI は、MapType オブジェクトを使用して基本の4種類のマップに関する情報を保持しています。
それでは、基本のマップタイプをみていきましょう。

基本のマップタイプ

名称	Google Map APIで使用する定数	詳細
基本的な地図	roadmap	道路や建物などの市街情報の地図を表示
航空写真	satellite	Google Earth 航空写真を表示
航空写真（複合ビュー）	hybrid	Google Earth 航空写真に主要な道路の透明なレイヤを追加した地図を表示
地形	terrain	地形情報に基づいた物理地図を表示

地図でマップタイプを設定するには、地図を作成する時にマップタイプのmapTypeId プロパティを設定する必要があります。
※マップタイプを設定しなかった場合は、デフォルトでROADMAPが使用されます。
設定できる値はgoogle.maps.MapTypeIdクラスで定義されており、上記4つの中から1つ指定します。また、地図を作成した後に、マップの setMapTypeId() メソッドを呼び出して、別のマップタイプを設定することも可能です。
まずは、地図を作成する時にマップのタイプを設定する方法をみていきましょう。

地図を作成する時にマップタイプを設定する

文字列で指定する場合:

var mapOption = {
    zoom: 9,
    center: {lat: 35.681167, lng: 139.767052},
    mapTypeId: 'roadmap'
};
var map = new google.maps.Map(document.getElementById("map"), mapOption);

上記mapTypeIdの'roadmap'を'satellite', 'hybrid', 'terrain'と変更することで、マップタイプの設定を変えることが出来ます。

google.maps.MapTypeIdクラスで指定する場合:

var mapOption = {
    zoom: 9,
    center: {lat: 35.681167, lng: 139.767052},
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOption);

上記mapTypeIdのgoogle.maps.MapTypeId.ROADMAPのROADMAPの部分をSATELLITE, HYBRID, TERRAINと変更することで、マップタイプの設定を変えることが出来ます。

地図を作成した後にマップタイプを設定する

地図を作成した後に、マップの setMapTypeId() メソッドを呼び出して、別のマップタイプを設定してみましょう。
Google Earth 航空写真を表示するsatelliteを設定してみます。
文字列で指定する場合:

1	`map.setMapTypeId('satellite');`

google.maps.MapTypeIdクラスで指定する場合:

1	`map.setMapTypeId(google.maps.MapTypeId.SATELLITE);`

マップタイプを変更するサンプル

これまでのマップタイプの設定方法を元に、マップタイプをボタンで変更できるサンプルを作成しました。
（※以下サンプルコードをそのまま使用しても地図が表示されます。まだ難しい場合はまずコピーして使用してみてください。スタイルは調整が必要です。）
◆html&css

<!DOCTYPE html>
<html>
  <head>
    <title>Map type change</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <!-- APIキーを以下<strong>YOUR_API_KEY</strong>の部分にセットしてください。 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  </head>
  <body>
      <div>
      <!-- マップタイプを変更するボタン -->
        <ul id="mapNavi">
          <li class="map-type float_l on" id="roadmap">
            ROADMAP
          </li>
          <li class="map-type float_l" id="satellite">
            SATELLITE
          </li>
          <li class="map-type float_l" id="hybrid">
            HYBRID
          </li>
          <li class="map-type float_l" id="terrain">
            TERRAIN
          </li>
        </ul>
        <!-- 地図を表示するコンテンツ -->
        <div id="map"></div>
      </div>
  </body>
</html>

◆JavaScript

var map;
function initMap() {
 var mapOption = {
  zoom: 12,
  center: {
   lat: 35.681167,
   lng: 139.767052
  },
  //地図を作成する時にマップタイプを設定する
  mapTypeId: 'roadmap'
 };
 map = new google.maps.Map(document.getElementById("map"), mapOption);
}
//ボタンでマップタイプを切り替える
$(function() {
 $('.map-type').on('click', function() {
  var id = $(this).attr('id');
  map.setMapTypeId(id);
  //航空写真の時、45° 画像の無効化にする
  if (id === 'satellite' || id === 'hybrid') {
   map.setTilt(0);
  }
 });
});
google.maps.event.addDomListener(window, 'load', initMap);

◆補足
航空写真の時、45° 画像の無効化について satellite および hybrid マップタイプは、利用可能な場合に高ズームレベルの 45° 画像がサポートされるため、この画像が存在する場所にズームインすると、自動的にビューが変更します。
今回は、45° 画像の表示は以下記述で無効化にしています。

1	`map.setTilt(0);`

有効化する場合は、setTilt(45)を呼び出します。

1	`map.setTilt(45);`

◆マップタイプを変更するサンプルボタンを使ってマップタイプの切り替えをできるようにしていますが、通常は地図上に表示されているマップタイプコントロールボタンを使って切り替えることができます。
次回、マップのスタイルを追加する解説時に、この切り替えボタンを使って追加したスタイルへの切り替えを行いたいと思います。

サンプルページはこちら

ご質問などございましたら、お気軽に下記コメント欄にお寄せください。

※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。

Maps Flow!

このブログを検索