Google Map API V3を試してみた

一年以上前に公開されていたらしいのですが、今更ながらGoogleMap APIのV3の存在を知ったので試してみました。

V3での主な変更点

V2からV3へとバージョンアップに伴い、以下のような変更・改善点があります。

API Keyが不要になった
URL毎に発行していたAPI Keyが不要となりました。開発者側にとっては結構うれしいことです。
スマートフォンへの対応がなされた
携帯端末用に表示速度が改善され、またGPS機能との連動が可能となりました。
JavaScriptの記述方法が変更された
V2に比べてJavaScriptの記述方法に変更があったようです。

テストコード

まずHTML側に地図を表示させるdiv要素を配置します。

1
<div id="gmap"></div>

地図を表示させる基本のコードは以下のとおりです。

1
2
3
4
5
6
7
8
9
10
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('gmap');
var initPosition = {
zoom: 14,
center: new google.maps.LatLng(35.17073004594335, 136.9),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};
var map = new google.maps.Map(mapdiv, initPosition);
});

マーカーを表示させるには以下のコードを追加します。

1
2
3
4
5
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.17073004594335, 136.8816876411438),
map: map,
title: '名古屋駅'
});

情報ウィンドウを表示するのはこちらのコードです。

1
2
3
4
var infoWindow = new google.maps.InfoWindow({
content: '名古屋駅'
});
infoWindow.open(map, marker);

また、V3より複数の情報ウィンドウを表示させることが可能になり、こちらのデモページの様な表現も出来るようになりました。

デモページで使っているJavaScriptのコードは以下のとおりです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('gmap');
var initPosition = {
zoom: 14,
center: new google.maps.LatLng(35.17073004594335, 136.9),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};
var map = new google.maps.Map(mapdiv, initPosition);

var marker = new Array();
var infoWindow = new Array();

marker.push( new google.maps.Marker({
position: new google.maps.LatLng(35.17073004594335, 136.8816876411438),
map: map,
title: '名古屋駅'
}) );
infoWindow.push( new google.maps.InfoWindow({
content: '名古屋駅'
}) );

marker.push( new google.maps.Marker({
position: new google.maps.LatLng(35.170798014746985, 136.92037045955658),
map: map,
title: '新栄町'
}) );
infoWindow.push( new google.maps.InfoWindow({
content: '新栄町'
}) );

for(var i=0; i<marker.length; i++) {
infoWindow[i].open(map, marker[i]);
}
});
Author: SUSH
Link: http://blog.sus-happy.net/google-map-api-v3/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.