Google Maps で遊ぼう

Googleが提供している地図サービスを自前のサイトでも利用する方法を紹介。

利用手順

sign up API keyからAPIを使うためのキーを取得
API Documentationを見ながらプログラム作り
あとは、アイディア(笑)

メモ

スクリプト・ページファイル
ファイルの文字コードをUTF-8にしないと、外部スクリプトファイルのコンパイルに失敗することがある。

スクリプトの実行タイミング
IEの場合、サンプル通りにスクリプトを組んでも実行できない場合がある。回避方法として、ドキュメントのロードが完了してから実行するように変更。

<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=～" type="text/javascript" charset="utf-8"></script>
</head>

<body onLoad="startMaps()">

<div id="map" style="width: 500px; height: 500px;"></div>

<script type="text/javascript" charset="utf-8">
//<![CDATA[
var map;
var request;

function startMaps()
{
	map = new GMap(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.centerAndZoom(new GPoint( 139.745407, 35.658586), 8);

	request = GXmlHttp.create();
}
//]]>
</script>

サンプル

サンプルの表示

地図の表示と、撮影ポイントのマーカを表示します。マーカのデータはXMLファイルで用意し、GXmlHttpクラスからファイルの取得とデータの表示を行ないます。