Google Map API を利用して地図を表示する

ここでは地図情報を表示するための API である Google Maps API の第一弾として、基本的な地図の表示方法を紹介します。

とても基礎的なことで、これを出発点にいろいろな応用ができるようになりますので、ぜひみていってください。

ここで作るサンプル - カリフォルニアディズニーランド

地図の表示例として、私の住むところから西に30分程車で行ったとところにある、カリフォルニアのディズニーランドを表示します。

いかがでしょうか？上に地図が表示されていますでしょうか。

こうした地図情報をどのように表示するのか説明します。

Google Maps API で地図を表示する方法

Google Maps API で上のような地図を表示するコードは次のようになります。

<script type="text/javascript" 
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
	var map, mapOptions;
	var pointDisney = new google.maps.LatLng(33.813061, -117.918892);

	mapOptions = {
		zoom: 14,
		center: pointDisney,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControlOptions: { 
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		}
	};

	map = new google.maps.Map(
		document.getElementById('map_canvas'),
		mapOptions);

});
</script>
<div id="map_canvas" style='width:400px;height:300px;'></div>

このコードを順に説明します。

JavaScript の取り込み

まず JavaScript を二つ取り込んでいます。

jQuery として https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
Google Maps として http://maps.google.com/maps/api/js?sensor=false

jQuery は必須ではありません。私は onload の処理を呼ぶだけのために使っています。

必須なのは Google Maps の JavaScript です。最近 Application Key が不要になったようですね。

地図の設定値

どんな地図を表示したいのか、という設定値については、ここでは mapOptions という名前のオブジェクトにパックします。

zoom はズームのレベル。値が小さいほど引いて表示されます。 mapTypeId は地図の表示の種類です。普通の地図は ROADMAP です。地図の操作用のコントロールボックス・メニューは mapTypeControlOptions に指定します。 center には地図の中心場所を指定します。

座標を意味する LatLng

地図上の１点は LatLng オブジェクトで表現します。

英語で緯度・経度はそれぞれ Latitude、Longitude といいます。 LatLng は緯度経度を表しているというわけです。

google.maps.LatLng() の初期値として、ここではディズニーランドの緯度と経度を渡しています。

ちなみに、緯度経度なんてそんな簡単に分からないじゃないか、とおもうかもしれませんが、緯度経度を求めるサービスもありますので、これもあとで紹介します。

緯度経度を求める作業をジオコーディングといいますが、ジオコーダーとしては少なくとも北米地区では、Yahoo! のジオコーディングサービスがカバー範囲が広く便利です。

例えばカナダやメキシコの地図も含むような場合は Yahoo! のサービスを検討すると良いかもしれません。

地図の表示

地図の表示オプションと地図を表示する div 要素を指定して、google.maps.Map オブジェクトを作れば地図が表示されます。

これで上の地図が表示されます。

しかし、これだけではいまいち地図上のどこをみていいのかわかりにくいですね。地図上にマーカーを表示する方法については、地図上にマーカーを表示する　で説明します。