Googleの高機能なMAPを自分のサイトに -実践編-

こちらが今回Google Maps APIを解説するにあたって設置したサンプルのMAPです。

サンプルMAP

今日は、このサンプルMAPを設置し、カスタマイズするところまで順に覚えて帰って下さい。

ではGoogle Maps APIの使用方法について簡単に解説していきましょう。

まず最初に必ず必要となるのがGoogleアカウントです。
日本のgoogleのページで取得すればいいだけなのでアカウントの取得方法については割愛しますが・・・・。

googleにログインした状態で、
http://www.google.com/apis/maps/にアクセスして下さい。

まだ英語ページしかないようですが、いずれ日本語ページも出来るのではないでしょうか。

下記の画像の場所、「Sign up for a Google Maps API key」にアクセスして下さい。

次のページに進むと利用規約のページとなります。
色々と書いてありますがざっくりと以下の感じになります。

・1日に50万ＰＶ以上あるサイトなら事前に連絡してください
・24時間ずっと高トラフィックをかけ続けるならアクセスを停止します
・エンドユーザーが使用しやすいように設置してください。
・google maps上のロゴなどを変更したり見づらくしないで下さい。
・定期的にアップデートします。1ヶ月前ぐらいには事前に通知します。
・非合法活動やプライバシーを侵害する恐れのあるサイトは使用しないで下さい。
・googleは突然アカウントを停止する権利を有します。

といった感じのことを書いてありますが、要は普通のサイトで普通に使って下さいということですね。
誤訳や間違いもあるかと思いますので原文をよく読み利用規約に同意して下さい。

規約に同意するチェックボックスにチェックを入れ
使用したいサイトのURLを入力しGenerate API Keyをクリックして下さい。

ここで気をつけて頂きたいのが入力するURLですがhttp://www.sample.com/sample/sample.htmlのようなファイル名まで指定する形ではなく
http://www.sample.com/sample/のようなディレクトリ名で終わらせて下さい。
意外とここでつまづいてしまう方が多いようです。

次へ進むとAPI Keyとサンプルソースが表示されます。

このまま使うとgoogle本社のマップを自分のサイトに貼り付けるだけとなってしまいますので
少なくともデフォルトの緯度と経度を変更する必要があります。

google mapsから緯度経度を出す方法もありますが多少面倒なので
こちらのサイトで調べることができます。

参考リンク：knecht

緯度経度を調べたらサンプルソースの緯度経度を書き換えましょう。

あとはそのまま貼り付けるだけなのですが、サンプルソースのままだと
航空写真や縮尺の設定がMAP上で変更することができません。

今回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">
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=あなたのKey"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = new Array(1);
function onLoad() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(緯度.緯度,経度.経度),15);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
var marker = null;
var n_markers = 0;
var markeropts = new Object();
marker = new GMarker(new GPoint(緯度.緯度,経度.経度), markeropts); ←マーカーのポイント
markers[n_markers] = marker;
n_markers++;
map.addOverlay(marker);
}
//]]>
</script>
</head>
<body onload="onLoad()" style="margin:0px; padding:0px;">
<div id="map" style="width:500px; height:500px; margin:0px; padding:0px;"></div>

</body>
</html>

そして恐らく初めてGoogleMapsを使用する方がつまづくのが
文字コードの問題です。大多数の方がサイトの文字コードをJISで制作されているかと思いますが
GoogleMapsではUTF-8という文字コードを使用しています。
ですので、JISで制作したサイトにGoogleMapsのスクリプトを貼り付けたところで表示しません。

ではどうするのか？

文字コードの説明をするとさらに長くなってしまいますのでこれも割愛しますが
一番楽な方法はIFRAMEを使用しUTF-8で制作したページを表示させる方法です。

IFRAMEであれば本体ページがJISで制作し、表示先がUTF-8であっても関係ないからです。
（関係ないかというとそうでもないんですが・・・・あまり問題ないからです・・・）

IFRAMEについては一昔前まではブラウザの互換性の問題で色々と賛否両論ありましたが
現在では主要ブラウザのほとんどで問題なく表示できるタグなのでPC向けサイトなら特に大きな問題は無いと思われます。

そして、Google APIのほとんどはバージョンアップを繰り返します。
以前まで正常に表示していたのに表示のテストをしている途中でなぜか表示しなかったり表示がおかしかったりしたら
ブラウザがキャッシュしたJavaScriptが古いプログラムを実行している可能性があります。
ブラウザのキャッシュを削除したりすると直ったりしますので一応ご参考までに。

07年08月16日Posted by MKK 全文を表示｜コメント ( 0) | トラックバック (0)

トラックバックURL：http://mkk-works.com/worksblog/mt-tb.cgi/9

- 戻る -　　　- ブログトップへ -