Google Maps JavaScript API V3
[ 2009.10.23 ] by h_takimoto | Categories：システムトレンド
Google Maps JavaScript API V3
最近、様々な案件で利用する事が多い、Google Maps。
比較的、お堅い組織のサイトでも導入されている事が多いですね。
そんなGoogle Maps APIの次期バージョン「Google Maps JavaScript API V3」が
出ていた事を今ごろ知ったので、調べてみました。
V2→V3への変更点
１．ライセンスキーが不要に。
２．改良されたMVCを採用。
３．モバイル機器（特にAndroid携帯とiPhone）に対応した機能。
現在はGoogleの実験プロジェクトを公開する場であるGoogle Labsでの提供です。
それでは、もっともシンプルな地図を表示するサンプルで、
どのくらい書き方が変わっているのかを見てみましょう。
V3を使ってシンプルな地図を表示
V2を使ってシンプルな地図を表示
ソースの全文は一番最後に掲載していますので、
参照してください。
それぞれ、ディベロッパーガイドにあるサンプルコードを
比較のために少しだけ改変した物です。
以下からは、差分だけ見ていきます。
メタタグの指定
V2にはなかったmetaタグの指定が。
iPhoneでフルスクリーン表示やユーザーによるスケール指定可否などを設定する模様。
※iPhone持ってません…
V3
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Javascriptの呼び出し
URLが一部変更になり、「v=2」の様なバージョン指定が無くなりました。
sensor=falseというのは、位置情報を取得できる端末か（位置情報を利用するか）の指定です。
PCなど、位置情報を取得しない機器の場合は、falseを設定する事が推奨されています。
が、なんと言ってもAPIキーが不要になった事でコードがスッキリ！うれしい！
V3
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
V2
<script src="http://maps.google.com/maps?hl=ja&file=api&v=2&key=ABQIAAAAcIfth0ACOFfTEtGgfXPQvhT3EZ6WUiOzmvmfKH_ylmWD3s_VhRSsC-wlehYYcqE5hKuV0fMP0O2nag" type="text/javascript"></script>
座標を指定するクラス名
google.maps.という書き方はした事なかったんですが、この名前空間はv2でも使えるそうです。
（ GMap2 → google.maps.Map2 ）
V3
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
V2
var myLatlng = new GLatLng(-34.397, 150.644);
中心地点やズームの指定
オプションを配列にセットしておいて、Mapオブジェクト生成時に引数としてセット。
V2ではmapオブジェクトを生成してから、setCenterしてました。
スケール設定や地図種別選択のコントロールがデフォルトで出るように。
また、V3では地図種別の初期値を示すmapTypeIdは必須です。
V3
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
V2
var myZoom = 8;
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(myLatlng, myZoom);
と言うことで、もっともシンプルな地図表示での比較をお届け致しました。
ただ、最も恩恵が受けられるであるAndroid端末やiPhoneでの実験ができてないのですが、
その辺りは実機を持ってる方にお願い致しましょう！
参考資料
ディベロッパーガイド (Google Maps API Version3 日本語ドキュメント)
The Google Maps API V3 – Google Maps JavaScript API V3 – Google Code
サンプルコード
以下、比較に使用したサンプルコードです。
こちらは見慣れたV2版。
———————————————————————————–
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API v2 Example: Map Simple</title>
<script src="http://maps.google.com/maps?hl=ja&file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new GLatLng(-34.397, 150.644);
var myZoom = 8;
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(myLatlng, myZoom);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
———————————————————————————–
こちらが新しくなったV3版
———————————————————————————–
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
———————————————————————————–
最近のコメント