• 小
  • 中
  • 大

ナビゲーションコントロールの種類


ナビゲーションコントロールは地図の大きさに従って自動的に表示する種類が変わります。今回はこの表示されるナビゲーションコントロールの種類を明示的に指定する方法を確認します。

ナビゲーションコントロールをどの種類にするのかはMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「navigationControlOptions」プロパティに設定することで選ぶことができます。

「navigationControlOptions」プロパティに設定する値はNavigationControlOptionsオブジェクトです。このオブジェクトには2つのプロパティが用意されているのですが、その中の「style」プロパティに使用するナビゲーションコントロールの種類を表す値を設定します。

指定可能な値はNavigationControlStyleクラスで定数として定義されています。


定数説明
ANDROID小さいズーム コントロールは、Android のネイティブ マップ アプリケーションで使用されるものと類似しています。
DEFAULTデフォルトのナビゲーション コントロール。地図のデフォルトのコントロールは、地図のサイズやその他の要素によって異なります。API の将来のバージョンでは変更される可能性があります。
SMALL小さい、ズームのみのコントロール。
ZOOM_PANズーム スライドと双方向の移動パッドが付いた大きなコントロール。


表示例 SMALLタイプ
ズームのみのコントロール SMALL

表示例 Android タイプ
ズームのみのコントロール Android

表示例 ZOOM_PANタイプ
ズームのみのコントロール SZOOM_PAN

例えば「ZOOM_PAN」タイプのナビゲーションコントロールを使用する場合は次のように記述します。
var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}

};

このように地図上に表示されるナビゲーションコントロールの種類を設定することができます。

サンプルコード

サンプル.js


var map;
function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
};
map = new google.maps.Map(document.getElementById
("map_canvas"), opts);
}

function setDefault() {
var opts = {
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
};
map.setOptions(opts);
}

function setAndroid() {
var opts = {
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ANDROID
}
};
map.setOptions(opts);
}

function setSmall() {
var opts = {
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};

map.setOptions(opts);
}

function setZoomPan() {
var opts = {
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
};

map.setOptions(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>
<form><p>
<input type="button" id="default" value="DEFAULT"
onclick="setDefault()" />
<input type="button" id="android" value="ANDROID"
onclick="setAndroid()" />
<input type="button" id="small" value="SMALL"
onclick="setSmall()" />
<input type="button" id="zoompan" value="ZOOM_PAN"
onclick="setZoomPan()" />
</p></form>
</body>
</html>


表示例 ナビゲーションコントロールの種類を切り替える


Google Maps サンプル > ナビゲーションコントロールの切り替え