マップタイプコントロールで変更できるマップタイプの設定

広告

Googleマップではいくつかのマップタイプが用意されています。このマップタイプはマップタイプコントロールを使って変更することができますが、変更可能なマップタイプの種類を指定することができます。ここではマップタイプコントロールで変更できるマップタイプの設定方法について解説します。

1.利用可能なマップタイプの一覧
2.マップタイプコントロールで選択可能なマップタイプの指定
3.サンプルコード

利用可能なマップタイプの一覧

利用可能なマップタイプの種類はgoogle.maps.MapTypeIdクラスの定数として次の4つが定義されています。

ConstantDescription
HYBRIDThis map type displays a transparent layer of major streets on satellite images.
ROADMAPThis map type displays a normal street map.
SATELLITEThis map type displays satellite images.
TERRAINThis map type displays maps with physical features such as terrain and vegetation.

ROADMAPは「地図」です。マップタイプコントロールで「地図」をクリックした時に表示されます。

p2-1

SATELLITEは「航空写真」です。マップタイプコントロールで「航空写真」をクリックした時に表示されます。(ラベルのチェックは外してあります)。

p2-2

HYBRIDは「航空写真＋地図」です。マップタイプコントロールで「航空写真」をクリックし、下に表示された「ラベル」にもチェックをした時に表示されます。

p2-3

TERRAINは「地形」です。マップタイプコントロールで「地図」をクリックし、下に表示された「地形」にもチェックをした時に表示されます。

p2-4

これらの4つのマップタイプのいずれか1つを選択して地図を表示します。

マップタイプコントロールで選択可能なマップタイプの指定

マップタイプコントロールに対してスタイルや位置そして選択可能なマップタイプを指定するにはのmapTypeControlOptionsプロパティを使います。mapTypeControlOptionsプロパティにはgoogle.maps.MapTypeControlOptionsクラスのオブジェクトを設定します。このクラスでは3つのプロパティが用意されており、マップタイプの指定にはmapTypeIdsプロパティを使います。

例えば「ROADMAP」だけをマップタイプコントロールに表示させたい場合は次のように記述します。 

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: google.maps.MapTypeId.ROADMAP
    }
};

「ROADMAP」と「SATELLITE」のように複数のマップタイプを設定したい場合には次のように配列で値を記述します。 

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE
      ]
    }
};

このようにマップタイプコントロールで選択可能なマップタイプを自由に設定することができます。

サンプルコード

では簡単なサンプルを作成して実際に試してみます。 

function initialize() {
  var latlng = new google.maps.LatLng(31.591404,130.654907);
  var opts = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.HYBRID
      ]
    }
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Google Maps サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
    </script>

    <script src="./js/code2_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>自宅の地図です。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

ブラウザでWebページを開くと次のように表示されます。

p2-5

今回はマップタイプコントロールで選択可能なマップタイプをROADMAPとHYBRIDだけ設定しましたので地図上で選択可能なマップタイプも2つだけになっています。なおSATELLITEがない時ににHYBRIDを選択可能なマップタイプとして設定すると地図上では「地図＋写真」という表記に変わります。

( Written by Tatsuo Ikura )