スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

Google Maps APIのバージョン3が公開されています。
これまで、Google Mapsを利用したWebアプリはバージョン2を使っていましたが、今回、バージョン3が公開されたことで、チャレンジしてみようと思いました。

本サイトでもバージョン3への移行を奨励しています。
Google Maps JavaScript API V3
また、Google Mapsではストリートビューの強化や賃貸情報の追加など、日々その便利性は高まっており、その恩恵を受けるためにもバージョン3を習得するのは必須かなと考えました。

ただ、いかんせん、これまでのバージョン2との互換性はまったくなく、バージョンアップ移行が簡単ではないという点と、バージョン3の日本語マニュアルページがないというところがハードルです。

今回は、バージョン2との違いも含め、基本的な利用方法を見ていきます。

導入にあたりjsを読み込むだけ

バージョン2を利用するにはAPIキーが必要でしたが、バージョン3では必要ありません。公開されているJavaScriptを読み込むだけです。

<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"></script>

パラメータ「sensor」は携帯端末用にGPSなどのセンサー機器を備えている場合にtrueにします。ここでは通常のPC版を想定しているので、falseにしておきます。

マップを表示するエリアを用意

html側でマップを表示するエリアを用意しておきます。例えば400×400のエリアを用意します。

<div id="googlemaps" style="width:400px; height:400px"></div>

JavaScriptを実行しAPIを呼ぶ

ウィンドウの起票時に以下のJavaScriptを実行すると地図が表示されるはずです。

var latlng = new google.maps.LatLng(36, 135);
var myOptions = {
	zoom: 4,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googlemaps"), myOptions);

北緯35度、東経135度でズームは4に、標準のブラウザサイズで日本本土全体が見える設定になっているはずです。


これからいろいろ試してみたいと思います。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search