• 小
  • 中
  • 大

マップタイプを指定


地図のマップタイプは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」methodを使います。
setMapTypeId(mapTypeId:MapTypeId)

例えば航空写真のマップタイプを設定する場合は次のように記述します。
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);

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

サンプルコード

サンプル.js


var map;

function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
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);
}

サンプル.html
<!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 v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 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>


表示例 マップタイプを指定し切り替え


Google Maps サンプル > マップタイプを指定して切り替える