Google Maps(グーぐる マップ)をいよいよ挿入する。

Google Mapsを挿入するにはキーを取得しなければならない。
以下のURLからキーを取得しよう。

http://code.google.com/intl/ja_ALL/apis/maps/

「登録して Google Maps API キーを取得します。」をクリックするとキー取得画面に行く。

そこで使用するWebサイトを入力して「APIキーを生成」ボタンを押すと
キー取得画面に行って使用できるキーが表示される。
この画面については保存しておこう。

ここで問題なのは、「使用されるWebサイト」の入力。
ページの上の方に「単一の Maps API キーは、単一の「ディレクトリ」またはドメインで有効です。詳細についてはこの よくある質問 を参照してください。」と書かれてあるので、よくある質問を読んでみよう。

使用されるWebサイトのURLは一番上のホストの部分を入れておけば、下位のフォルダ部分も有効となることが書かれている。

私の場合プロバイダから与えられた一番上の部分を入力した。
http://www.d3.dion.ne.jp/~jkondou/

このURLで取得したキーでgoogle Mapを作成してアップロードしたら登録したURLの下位のフォルダでも表示された。
http://www.d3.dion.ne.jp/~jkondou/javascript/googlemap.htm

キーは何個でも取得可能と書いてあるが、なるべく上位フォルダに登録しておいた方が良いかもしれない。

後は、ローカルでサイトを作成するためにも以下のURLも登録した方が良いかもれない。
http://localhost/

Google Maps APIを利用しようとした時、DOCUMENTタイプをXHTMLに準拠させなければならない。

準拠方法はこちらで説明していますので見てください。

Googleサイトにサンプル集があるので、そのソースをまねればいろいろできます。

作成したHTML文書はこちら
以下にソースの説明をしていきます。

<?xml version="1.0" encoding="UTF-8"?>

なくても動く。いらないかも。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google map</title>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>

googleマップは「map」のIDでいろいろ指定できようだ。
大きさをstyleで指定し、divの中身をid="map"と指定してJavaScriptで替える。


<script src="http://maps.google.com/maps
file=api&amp;v=2&amp;sensor=false&amp;key=
ABQIAAAAJXYwFgs3R54rlXBVQrZ-
QRSQX0zcyHiuBBtvLf60RI8qT6jGRBQ
Gp1BCIcxnSAnD57RevlOVEHHbMQ"
type="text/javascript"></script>
<script type="text/javascript">

Google Maps APIでキーを取得した時に表示される、JavaScriptで表示させるためのソース。key=***のところに取得したキーを入れる。
sensor=true or falseとなっているが、GPSセンサーは取り付けていないので、sensor=falseとした。
多分、携帯用のGPSを組み込んで、目的地まで何メートルとか表示させるために使用するのだろう。
位置ゲーで使用していそう(推測)。。


//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());

Googleマップの左にあるズーム機能、移動機能をつける。LargeをSmallにするとズーム機能部分が小さくなる。この行を消せばズーム機能、移動機能はなくなる。体感しよう。


map.addControl(new GMapTypeControl());

Googleマップの上側に地図、航空等マップの種類を選べるボタンをつけれる。この行を消せばボタンはなくなる。

map.centerAndZoom(new GPoint(136.8989610671997, 35.186225462776335), 4);

最初に地図を表示させる地点を経度、緯度、ズームの大きさで指定する。これを指定しないとGoogleマップは表示されなかった。重要。

var point = new GPoint(136.8989610671997, 35.186225462776335);
var marker = new GMarker(point);
map.addOverlay(marker);

マーカーをつける。経度、緯度を指定する。


var offset = new GSize(0, -20);
map.openInfoWindowHtml(map.getCenterLatLng(),'<div style="width: 200px"><a href="http://ja.wikipedia.org/wiki/%E6%96%B0%E5%AE%BF%E9%A7%85" target="_top">名古屋の中心名古屋城。</div>', offset);

マーカーの吹き出しをつける。マーカーを差している地点より-20px上のマーカーの点の部分に吹き出しをつける。ここで気づいたのだが、文字化けする場合はHTML文書をUTF-8で保存すること。保存方法は
こちらで書いたので参照ください。

//]]>
</script>
</body>
</html>

以上でGoogle Maps APIの挿入は完了した。

これだけでよいのだが、もう少し応用を利かせたいと思う。