• 小
  • 中
  • 大

ナビゲーションコントロール有効/無効


利用者が地図のズームレベルを変更するための用意されているのがナビゲーションコントロールです。ナビゲーションコントロールはデフォルトで置に表示されているものです。


表示されているコントロールは小画面用のもので、地図の幅が400ピクセル以上で高さが350ピクセル以上の場合は自動に大画面上のコントロールが表示されます。

小画面用のコントロールの場合、「+」をクリックすると詳細な地図が表示され、「-」をクリックすると広域な地図が表示されます。
表示例 ナビゲーション コントロール
ナビゲーション コントロール

ナビゲーションコントロールはデフォルトで有効で表示されていますが、コーディングにより有効にしたり無効にしたりすることができます。

ナビゲーションコントロールを表示させないように無効にする場合はMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「navigationControl」プロパティに"false"を設定します。
プロパティタイプ説明
draggablebooleanナビゲーション コントロールの有効/無効(初期時の状態)。

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

"false"に設定するこてでナビゲーションコントロールが無効となり画面に表示されなくなります。有効にしたい場合には"true"を設定します。

サンプルコード

サンプル.js


function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: false
};
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 サンプル > ナビゲーションコントロールを無効にする