「GoogleMaps API V3」GoogleMapsの各種コントロールの設定方法

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

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

01<head>
02<title>Google Map API v3-2</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05function initialize() {
06    // Google Mapで利用する初期設定用の変数
07    var latlng = new google.maps.LatLng(36.062092, 136.223323); // JR福井駅の緯度・経度
08    var mapOptions = {
09        zoom: 14,
10        mapTypeControl: true,       // 地図の種別切り替えを表示
11        mapTypeControlOptions: {
12            position: google.maps.ControlPosition.TOP_RIGHT,        //右上配置
13            style:    google.maps.MapTypeControlStyle.HORIZONTAL_BAR//水平ラジオボタンバー
14        },
15        navigationControl: true,    // 拡大縮小のナビを表示
16        navigationControlOptions: {
17            position: google.maps.ControlPosition.TOP_LEFT,         //左上配置
18            style:    google.maps.NavigationControlStyle.ZOOM_PAN   //ズームスライド・移動パッド
19        },
20        scaleControl: true,         // 縮尺の表示
21        scaleControlOptions: {
22            position: google.maps.ControlPosition.BOTTOM_LEFT,        //左下配置
23            style:    google.maps.ScaleControlStyle.DEFAULT         //標準のスケール
24        },
25        mapTypeId: google.maps.MapTypeId.ROADMAP,
26        center: latlng
27    };
28    // GoogleMapの生成
29    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
30}
31</script>
32</head>
33<body onload="initialize()">
34    <div id="map" style="width: 400px; height: 400px;"></div>
35</body>
36</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」 の使い方その２

■mapTypeControl（地図の種別切り替え）

■navigationControl（拡大縮小のナビ）

■scaleControl（縮尺）

■関連記事

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