• 小
  • 中
  • 大

コントロールの有効/無効


ズームレベルを変更したりマップタイプを変更ものをコントロールと言います。


マップタイプコントールは初期では有効(表示)になっていますが、mapTypeControlでマップタイプコントロールを有効にしたり無効にしたりすることができます。
マップタイプコントールを非表示にしたい場合はMapクラスのオブジェクトを作成する時にMapOptionsオブジェクトの「mapTypeControl」プロパティに"false"を設定して下さい。

デフォルトのコントロール セットMaps API には次のようなデフォルトのコントロールがあります

コントロール大画面小画面iPhoneAndroid
ナビゲーション400x350 ピクセルより大きなサイズ用の移動/ズーム コントロール400x350 ピクセル未満の小さなサイズ用のミニズーム コントロールなし"Android" コントロール
MapType320 ピクセル幅より大きな画面の水平バー320 ピクセル幅未満の画面のドロップダウン大画面/小画面と同じ大画面/小画面と同じ
スケールなしなしなしなし

●mapTypeControl は、マップ タイプ(地図や航空写真など)を切り替えるマップ タイプ コントロールを有効または無効にします。このコントロールは、デフォルトでは地図の右上に表示されます。さらに、mapTypeControlOptions フィールドはこのコントロールで使用する MapTypeControlOptions を指定します。

表示例 マップ タイプ


●navigationControl は移動/ズーム コントロールを提供するナビゲーション コントロールを有効または無効にします。このコントロールは、デフォルトでは地図の左上に表示されます。さらに、navigationControlOptions フィールドはこのコントロールで使用する NavigationControlOptions を指定します。

表示例 ナビゲーション コントロール


●scaleControl は簡単な地図縮尺を表示するスケール コントロールを有効または無効にします。このコントロールは、デフォルトでは表示されません。有効にすると、地図の左下に表示されます。さらに、scaleControlOptions はこのコントロールで使用する ScaleControlOptions を指定します。

表示例 スケール コントロール


プロパティタイプ説明
mapTypeControlbooleanマップ タイプ コントロールの有効/無効(初期時の状態)。

var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 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,
mapTypeControl: 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 サンプル > コントロールの無効