「GoogleMaps API V3」 の使い方その2

前回に引き続き簡単な地図の表示に、各種コントロールの設定方法についてです。

<head>
<title>Google Map API v3-2</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
<script type="text/javascript">
function initialize() {
	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(36.062092, 136.223323);	// JR福井駅の緯度・経度
	var mapOptions = {
		zoom: 14,
		mapTypeControl: true,		// 地図の種別切り替えを表示
		mapTypeControlOptions: {
			position: google.maps.ControlPosition.TOP_RIGHT,	    //右上配置
			style:    google.maps.MapTypeControlStyle.HORIZONTAL_BAR//水平ラジオボタンバー
		},
		navigationControl: true,	// 拡大縮小のナビを表示
		navigationControlOptions: {
			position: google.maps.ControlPosition.TOP_LEFT,		    //左上配置
			style:    google.maps.NavigationControlStyle.ZOOM_PAN   //ズームスライド・移動パッド
		},
		scaleControl: true,		    // 縮尺の表示
		scaleControlOptions: {
			position: google.maps.ControlPosition.BOTTOM_LEFT,		  //左下配置
			style:    google.maps.ScaleControlStyle.DEFAULT		  //標準のスケール
		},
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	// GoogleMapの生成
	var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
</head>
<body onload="initialize()">
	<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>

■mapTypeControl(地図の種別切り替え)

マップタイプコントロールの詳細を指定したい場合は、mapTypeControlをtrueにし、mapTypeControlOptionsの設定を行います。 mapTypeControlOptionsにはposition、style等のオプションがあります。それぞれの設定値は以下の通りです。
positionの設定は、以下のControlPositionクラスの定数値を用います。

定数内容
TOP 上中央
TOP_LEFT 左上
TOP_RIGHT 右上
LEFT
RIGHT
BOTTOM 下中央
BOTTOM_LEFT 左下(Google ロゴの右側)
BOTTOM_RIGHT 右下(著作権の左側)

styleの設定は、以下のMapTypeControlStyleクラスの定数値を用います。

定数内容
DEFAULT デフォルトのマップ タイプ コントロール
DROPDOWN_MENU ドロップダウン メニュー
HORIZONTAL_BAR 水平ラジオ ボタン バー

■navigationControl(拡大縮小のナビ)

拡大縮小のナビの詳細を指定したい場合は、navigationControlをtrueにし、navigationControlOptionsの設定を行います。 styleの設定は、以下のNavigationControlStyleクラスの定数値を用います。

定数内容
ANDROID 小さいズーム コントロール(Androidのマップソフトに似ている)
DEFAULT デフォルトのナビゲーション コントロール
SMALL ズームのみのナビゲーション コントロール
ZOOM_PAN ズーム スライドと双方向の移動パッド

■scaleControl(縮尺)

縮尺の詳細を指定したい場合は、scaleControlをtrueにし、scaleControlOptionsの設定を行います。
styleの設定は、以下のScaleControlStyleクラスの定数値を用います。
定数値としては現状、「DEFAULT」しかないので、これを指定しなくても問題ありません。


■関連記事
「GoogleMaps API V3」の使い方その1
「GoogleMaps API V3」の使い方その3(マーカーの表示)
「GoogleMaps API V3」の使い方その4(イベント)
「GoogleMaps API V3」の使い方その5(続イベント)
「GoogleMaps API V3」の使い方その6(続々イベント)
「GoogleMaps API V3」の使い方その7(ポリライン・ポリゴン)
「GoogleMaps API V3」の使い方その8(ジオコーディング)
「GoogleMaps API V3」の使い方その9(ルート検索)
「GoogleMaps API V3」の使い方その10(ルート検索2)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る