Google Mapsとは

Google マップに自分のお店やサービスの情報を表示する

マップ ヘルプ にしたがい、店舗情報を登録する。

Google Maps API をホームページに組み込む

　Google Maps API 登録ページで自分のウェブサイトの URL を登録すると使えるようになる。

 <div id='map' style='width:500px; height:500px;'>
 <script type="text/javascript"
 src="http://maps.google.co.jp/maps?file=api&v=2&key=あなたのキー" charset="utf-8">
 </script>
 <script type="text/javascript">
 //<![CDATA[
 function load() {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(34.3626, 132.35025), 17);
 }
 onload = load;
 onunload = GUnload;
 //]]>
 </script>

と書くと、そこに Google Maps が現れる。 utf-8 を書かないと Internet Explorer 6 で使えないとか(FireFox では表示される……)、

 <meta http-equiv="Content-Script-Type" content="text/javascript">

を書いておかないと表示がおかしくなるといった問題に遭遇した。 マーカーを出すのにもやや試行錯誤が必要のようだ。

　以上は API を使う高度な Google Maps の使い方。単にお店の地図を表示するだけなら簡単だ (このサイトで使用した地図)はそう。

マーク、吹き出しなど

　Google Maps は最初から電話帳に登録されたお店等なら、Google Maps でそれを検索し、 そのまま右上の[このページのリンク]-[埋め込み地図のカスタマイズとプレビュー]と進めばよい。

　しかし、住所が違う、電話帳に載っていないなどの際は面倒なことになる。

1. Google Maps で住所を検索し、上のソースを見て何とか経度、緯度情報を確認する。
2. JJWorkshop.comなどで何とか地図のソースを作る。
3. 通常のソース、上で得たソースを比べ、+(店名)などにより、店の名前が出るようにする。

のような工程を取るしかないようだ。 もちろん、Google Maps API を使えればどうにでもなるだろう。

参考

• CYBER@GARDEN Google Maps API解説