Google Maps API を使ってみる

Google Maps API の使い方などの説明です。

Google Maps API: Google Maps は、画面をドラッグするだけで、待ち時間なしで地図をスクロールできる Google の地図サービス (β版) です。 Ajax で実現されています。百聞は一見にしかず、↓これです。; 　; 　; Google Maps API とは、その Google Maps を簡単に機能拡張して自分のホームページ上に貼り付けられるようにした無償の Web サービスです。マーカーを置いたりできます。現在 Google Maps API (英語) でβ版が提供されています。; 　; Google Maps API はホームページ上に JavaScript でコードを書くだけで使えます。Web サーバー側には何も置く必要がないため、 CGI が使えないサーバーでも問題ありません。 Google Maps を呼び出すための script タグと数行の JavaScript を Web ページに書くだけで基本機能は動くため、あとは好きなように機能拡張して遊べます。

基本的な API の使い方

まず、 Google Maps API - Sign Up のページで、API キーを作成します。

このキーは Google Maps API を使った Web ページを置く URL ごとに用意された固有の文字列で、Google Maps API を呼び出すのに必要です。 URL を入力して、キーを取得しましょう。 URL は Web ページを置くアドレスの直前のフォルダ名まで入れる必要があるのでご注意を。例えば、このページであれば、http://www.antun.net/tips/ajax と入れます。一つの API キーで、1 日 500 回まで Google Maps API を使えます。

次に、Web ページの HEAD タグの間に Google Maps を呼び出すための script タグを書きます。

	<SCRIPT SRC="http://maps.google.com/maps?file=api&v=2&key=API キー"
 TYPE="text/javascript">
	</SCRIPT>

key= の後に先ほど取得した API キーを入れます。

そして、Web ページ本文に Google Maps を呼び出す JavaScript のコードを組み込みます。

	<div id="map" style="width: 400px; height: 300px"></div>
	<script type="text/javascript">
	//<![CDATA[
	var map = new GMap2(document.getElementById("map"));
	//]]>
	</script>

これだけで、Google Maps が動きます。見てお分かりのように、 div タグの style 属性でその画面の大きさを指定します。

API の応用

先ほど生成した GMap オブジェクトに対してメソッドを呼び出すことで、色々な指定ができます。

	map.setCenter(new GLatLng(35.1711, 136.8813), 12);

setCenter メソッドで地図の位置と拡大率が指定できます (上の例では東経 35.1711 度、北緯 136.8813 度、拡大率 12)。

	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());

addControl メソッドでボタン等が追加できます。

各メソッドの詳しい説明は Google Maps API Documentation で参照できます。ここにはサンプルも豊富に揃っています。

戻る