• 小
  • 中
  • 大

マップタイプの種類を設定


デフォルトではマップタイプコントロールには「地図」「航空写真」「地形」「ハイブリット」の4種類が選択可能となっています。地図表示上は2種類しかないように見えませんがオンマウスで隠れている「地図」下に「地形」があり、「航空写真」下に「ラベル」があります。


このマップタイプの種類はMapTypeIdクラスの定数として定義され、4つの定数が定義されています。
定数説明
HYBRID航空写真上に主要な道路の透明なレイヤを表示します。
ROADMAP市街地図を表示します。
SATELLITE航空写真を表示します。
TERRAIN地形的特徴を持つ地図を表示します。


表示例 HYBRID


表示例 ROADMAP


表示例 SATELLITE


表示例 TERRAIN


マップタイプコントロールにどのマップタイプを表示させるのかはMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「mapTypeControlOptions」プロパティに設定することで選択できます。

「mapTypeControlOptions」プロパティに設定する値はMapTypeControlOptionsオブジェクトです。このオブジェクトには3つのプロパティが用意されているのですが、その中の「mapTypeIds」プロパティに使用するマップタイプの配列にしたものを設定します。

例えば「地図」+「地形」のマップタイプを表示させたい場合は次のように記述します。
var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
}

};

コーディングすることでマップタイプをコントロール上で選択設定することが可能となります。

サンプルコード

サンプル.js


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

サンプル.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>
</body>
</html>


表示例 マップタイプの種類を指定


Google Maps サンプル > マップタイプの種類を設定