http://www.google.com/apis/maps/
このページの上にある「Sign up for a Google Maps API key」のリンクをクリックします。クリックすると次のページが表示されます。ページの下側にある「I have read and agree with the API terms and conditions」にチェックを入れ、使用するサイトのURLを入力し「Generate API Key」ボタンをクリックします。
すると入力したサイトのURLに対応するGoogle Maps API keyが生成されページの上側に表示されます。また、その下の方には実際のサンプルスクリプトが表示されます。
Google Mapsを使用するためのドキュメントが用意されています。
http://www.google.com/apis/maps/documentation/
注意：以下のサンプルでは私のサイトのAPI Keyになっていますが（緑色の部分）、もし私のサイト上にあるGoogle Mapsのサンプルを利用する場合には、この値は各自取得したAPIキーに置き換えて下さい。
それでは、このサンプルスクリプトを実行してみましょう。（サンプルを実行する）
サンプルを実行すると米国の場所が表示されます。できれば、最初から指定した場所を表示してほしいところです。最初の位置を決めるには以下のサンプルの赤字の部分を指定します。new GPoint()の最初の引数が横方向の位置（経度）、二番目が縦方向の位置（緯度）になります。その次の値はcenterAndZoom()の引数で、これは表示倍率になります。値が小さくなるほど細かい地図が表示されます。（サンプルを実行する）
＊注意：2006年8月現在では、APIはバージョン2になっているため、以下のようなバージョン1のプログラムは生成されません。バージョン2でも、ある程度の互換性を保って動作するようになっていますので、この章のサンプルプログラムは問題なく動作します。Google MapsのAPIに関してはGoogle Maps APIリファレンスを参照してみてください。本家のGoogle Maps リファレンスをまず見るのが先決です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(140, 25), 15);
//]]>
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(140, 25), 15);
//]]>
</script>
</body>
</html>
地図の大きさ（表示サイズ、表示範囲）はdivタグで指定されているwidth: 500pxとheight: 400pxの数値を変更することで自由に調整できます。
あと、最初の段階でウィンドウいっぱいに地図を表示させることもできます。ただし、Internet Explorerにはウィンドウサイズを取得するプロパティがないため動作しません（document.body.clentWidthは取得できるが、document.body.clientHeightがウィンドウの縦幅を正しく取得できません）。（サンプルを実行する）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
w = window.innerWidth;
h = window.innerHeight;
document.write('<div id="map" style="width: '+w+'px; height: '+h+'px"></div>');
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(135, 37), 11);
//]]>
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
w = window.innerWidth;
h = window.innerHeight;
document.write('<div id="map" style="width: '+w+'px; height: '+h+'px"></div>');
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(135, 37), 11);
//]]>
</script>
</body>
</html>
これで任意の位置の地図を表示させることができます。ただし、Google Mapsは全てのブラウザで動作するわけではありません。Mac版Internet Explorer 5などでは動作しません。このような場合には、Google Mapsが動作可能かどうかを調べる必要があります。動作可能かどうかはGBrowserIsCompatible()を使います。この戻り値がtrueであればGoogle Mapsは動作可能、falseであれば動作不可能になります。あとはif命令を使って、メッセージを表示するなどの処理を行います。以下のサンプルは、Google Mapsが動作可能かどうかを調べてメッセージを表示します。（サンプルを実行する）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
if (!GBrowserIsCompatible())
{
document.write("Google Mapsを利用できないブラウザです");
}else{
document.write("Google Mapsを利用できます");
}
//]]>
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
if (!GBrowserIsCompatible())
{
document.write("Google Mapsを利用できないブラウザです");
}else{
document.write("Google Mapsを利用できます");
}
//]]>
</script>
</body>
</html>
実際には利用できない場合には別のページに飛ばしてしまうことが多いでしょう。そのような場合は以下のようにlocation.hrefを使って別のページに飛ばします。サンプルではGoogle Mapsが利用できない場合、ng.htmlのページを表示します。（サンプルを実行する）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
if (!GBrowserIsCompatible())
{
location.href = "ng.html";
}else{
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(140, 25), 15);
}
//]]>
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
if (!GBrowserIsCompatible())
{
location.href = "ng.html";
}else{
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(140, 25), 15);
}
//]]>
</script>
</body>
</html>
これで最低限の状態でGoogle Mapsを表示できました。Google Mapsには、状況に合わせて、いくつかのコントロールが用意されています。次項では各種コントロールを表示してみます。
[第七章 2:各種コントロールを表示するへ]
[目次へ]
(2006.1.23, 2006.9.2追加)