「GoogleMaps API V3」 の使い方その２
前回に引き続き簡単な地図の表示に、各種コントロールの設定方法についてです。
<head>
<title>Google Map API v3-2</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" 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」の使い方その１⇒「GoogleMaps API V3」の使い方その３（マーカーの表示）
⇒「GoogleMaps API V3」の使い方その４（イベント）
⇒「GoogleMaps API V3」の使い方その５（続イベント）
⇒「GoogleMaps API V3」の使い方その６（続々イベント）
⇒「GoogleMaps API V3」の使い方その７（ポリライン・ポリゴン）
⇒「GoogleMaps API V3」の使い方その８（ジオコーディング）
⇒「GoogleMaps API V3」の使い方その９（ルート検索）
⇒「GoogleMaps API V3」の使い方その10（ルート検索2）
⇒「GoogleMaps API V3」の使い方その11（さらにInfowindow）
