おやじプログラマー日記 : 「GoogleMap API V3」の使い方その２

前回に引き続き簡単な地図の表示に、各種コントロールの設定方法についてです。
<head> <title>Google Map API v3-2</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" 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」しかないので、これを指定しなくても問題ありません。