マップタイプを指定

広告

地図のマップタイプはMapクラスのオブジェクトを作成し地図を表示する時に必ず指定しなければなりません。今までのサンプルでもMapOptionsオブジェクトの「mapTypeId」プロパティでマップタイプを指定してきました。 

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);

この方法以外にもマップタイプを設定することができます。Mapクラスで用意されている「setMapTypeId」メソッドを使います。 

setMapTypeId(mapTypeId:MapTypeId)

--

引数にマップタイプを表すMapTypeIdクラスの定数を指定します。指定可能な値は次の4つです。

定数説明
HYBRIDこのマップ タイプは、航空写真上に主要な道路の透明なレイヤを表示します。
ROADMAPこのマップ タイプは通常の市街地図を表示します。
SATELLITEこのマップ タイプは航空写真を表示します。
TERRAINこのマップ タイプは地形や樹木などの地形的特徴を持つ地図を表示します。

例えば航空写真のマップタイプを設定する場合は次のように記述します。 

var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);

このようにMapクラスのオブジェクトを作成後も任意のタイミングでマップタイプを切り替えることができます。

サンプルコード

では実際に試してみます。 

var map;

function initialize() {
  var latlng = new google.maps.LatLng(35.012863,135.677762);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

function setRoadmap() {
  map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}

function setSatellite() {
  map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
}

function setTerrain() {
  map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
}

<!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"/>
    <title>Google Maps JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code3_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

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

    <form>
    <p>
    <input type="button" id="roadmap" value="地図" onclick="setRoadmap()" />
    <input type="button" id="satellite" value="航空写真" onclick="setSatellite()" />
    <input type="button" id="terrain" value="地形" onclick="setTerrain()" />
    </p>
    </form>
  </body>
</html>

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

p3-1

今回はマップタイプコントロールを非表示にして、マップタイプを地図の下に設置したボタンで切り替えられるようにしました。それぞれのボタンを押すとマップタイプが切り替わります。

p3-2

p3-3

( Written by Tatsuo Ikura )