libro
www.tuyano.com
JavaScript/Ajaxライブラリ入門

Google Maps API (1/4)

作成:2010-04-26 09:46
更新:2010-05-11 15:31

■とりあえずGoogleマップを表示するには？

Googleマップは、Googleが提供するマップ・サービスですね。最近では、さまざまな情報を地図形式で表示する「エリア情報のデータベース」と化してきています。これを自分のWebサイトで利用できれば、ずいぶんと表現力もアップします。

Googleマップを利用するための機能は、「Google Maps API」として公開されています。これはGoogleのサイトに用意されており、それをロードする<script>タグを書くだけで、誰もが利用することができます。以前は、利用するためには自サイトを登録し、マップキーというシリアル番号をもらう必要があったのですが、Google Maps API 3.0からキーは不要となり、誰もが自由に使えるようになりました。

とりあえず、実際に表示するサンプルを見てもらいましょう。下のリストは、東京駅を中心としたマップを表示する例です。Google Maps APIを利用するためには、まず<script>タグのsrcに、Googleサイトにあるライブラリのアドレスを指定してロードしてやる必要があります。このsrcは、
src="http://maps.google.com/maps/api/js?sensor=真偽値&language=言語"
このように指定します。sensorは、ケータイなどのGPS内蔵端末でセンサーの使用・不使用を指定するものです。またlanguageは使用言語を指定します。これで、APIが使えるようになります。では、マップ利用の手順を簡単に整理しましょう。

１．LatLngオブジェクトの用意
まず最初に行うべきは、LatLngオブジェクトを作成する作業です。これは「位置」の情報を管理するためのオブジェクトで、以下のようにして作成をします。
new google.maps.LatLng( 経度 , 緯度 )
緯度と経度の情報は、Googleマップで調べることができます。地図の適当な場所を右クリックし、ポップアップしたメニューから「この場所について」を選ぶと、Googleマップの検索ワードを入力するフィールドに、緯度経度の値が出力されます。これをコピーして使えばいいのです。

２．オプション設定の配列の準備
続いて、マップを作成する際に必要となるオプション設定の情報を配列として用意します。マップではさまざまな設定が用意されているのですが、とりあえず最低限覚えておくべきなのは以下の３つだけです。

zoom――マップの拡大率です。数字が大きくなるほど拡大されます。だいたい、最大で20ぐらいまででしょう。
center――地図の中心位置を示します。これは必須で、用意しないと地図が表示されません。ここには、先ほど用意したLatLngオブジェクトを指定します。
mapTypeId――表示する地図の種類を指定します。これは、google.maps.MapTypeIdに用意されている値を使います。「ROADMAP」で通常の地図、「SATELLITE」で衛星sy左心になります。とりあえず、この２つだけ知っていればOKでしょう。

３．google.maps.Mapオブジェクトを作る
さて、準備ができたら、マップを作成します。これは「google.maps.Map」というオブジェクトとして用意されています。作成の際には以下のように引数を渡してやります。
new google.maps.Map( 表示するDOMエレメント , オプション設定の配列 )
これでOKです。オブジェクトが作成されると、第１引数で指定したエレメントに自動的に表示されます。エレメントは、document.getElementByIdなどで取得したものをそのまま渡せばよいでしょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type"
			content="text/html; charset=utf8">
		<title>Sample Page</title>
		<script type="text/javascript"
			src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
		<script type="text/javascript">
		<!--
		function init(){
			var element = document.getElementById("map");
			var latlng = new google.maps.LatLng(35.682956,139.766092);
			var options = {
				zoom: 12,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var map = new google.maps.Map(element,options);
		}
		//-->
		</script>
	</head>
	<body onload="init();">
		<h1>Map Sample</h1>
		<div id="map" style="width:300px; height:300px;"></div>
	</body>
</html>
※関連コンテンツ

「JavaScript/Ajaxライブラリ入門」に戻る