表紙 ＞ 目次 ＞ 情報・コンピュータ・・・ ＞ Google Mapsで遊ぶ 作成：2006年8月1日　

お断り

　 ここで紹介したコーディングは API V2 で記述しています。
　 2009年5月に APIが V3に更新され、操作方法にも変更がありました。従って、説明と現状で違いがあります。
　 実際のコーディングには役に立ちませんが、手探りでコーディングしていた頃の記録として掲載しております。

　 2005年7月に Googleが地図と衛星写真を公開し、無料で使えるようになりました。すでにこの Google Maps を取り込んで目的場所の地図やその付近の様子を表示するページがたくさん公表されていますので、すでにご存じの方も多いと思います。
　 このページでは、 Googole Maps のいろいろな使い方を紹介します。

Google Maps API 入門

前口上

Web ページ上で住所を検索して地図を表示するサービスはマピオンを始めとしていろんなプロバイダーによって提供されています。地図上のある点をクリックすると、その地点の情報を表示する方法（クリッカブルマップ　 例： 塩屋の史跡めぐり ）もすでにたくさん試みられています。
　 Google Maps を使うと世界中の地図と衛星写真を自由に自分のWeb ページ上に配置できるようになりました。
　 この機能を自分のページに取り入れる試みを行い、今の舞子を紹介するページを作りました。ここまでのコーディングの過程を記します。

マーク付きの地図を作って説明を表示する

1　API キーの取得
　 Google MAPS APIを使うためには、Google MAPS APIのキーが必要です。 keyは、Google MAPS APIのページから取得できます。「Sign up for a Google Maps API key」と書いてある部分をたどると登録画面になります。キーは登録した URLでしか使えません。
2　最初の地図
　 Google Maps から APIキーを知らせるメールに、地図を表示させる簡単なコードがついてきます。これをコピーしてエディターに張り付け、html ファイルにしてブラウザーで表示させます。アメリカの中央部にあるカンサスシティーが表示されればひとまず成功です。
3　学ぶとは真似ること
　 いよいよ、マーク付きの地図を作って説明を表示する作業に取りかかります。関連リンク集に示しているサイトのサンプルを見、説明を読みながら自分の場合に当てはめていきます。
　 サンプルを実行するとうまくいくのに、その部分を他のコーディングと組み合わせるとうまくいかない場合がよく起こります。コーディングの順番を入れ替えたり、変数名が重複していないか調べたりと試行錯誤です。

ひとまず出来上がり

まず、htmlファイルの中身をご覧ください。その後、少し説明をします。
　 （地図の大きさを400×400pxに縮小し、マーカーを4個所にしています）

<!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 Maps API サンプル</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=★★ここに　APIキーを書く★★" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var map = new GMap2(document.getElementById("map"));
　　map.addControl(new GLargeMapControl());
　　map.addControl(new GMapTypeControl());
　　map.addControl(new GOverviewMapControl());
　　map.addControl(new GScaleControl());
　　map.setCenter(new GLatLng(34.63451440996255, 135.03454685211182), 15,G_SATELLITE_MAP);

// マーカーを張り付ける関数
　　function addMarker(map, lat, lng, html) {
　　　var point = new GPoint(lat, lng);
　　　var marker = new GMarker(point);
　//吹き出しの幅を200pxに指定する
　　　var opt = map.getInfoWindow();
　　　opt.maxWidth = 200;

// マーカー上でマウスをクリックしたとき、説明を表示する
　　GEvent.addListener(marker, "click", function() {
　　　marker.openInfoWindowHtml(html,opt);
　　　});
　　map.addOverlay(marker);
}

// 上で定義した addMarker 関数を使って地図上にマークを張り付ける
　　addMarker(map, 135.03398895263672, 34.63334915546169, '<i><b>JR舞子駅</b></i><br>ホームの屋根の支柱に<a href="http://maikonohama.la.coocan.jp/topics/old-rail-maiko.htm"><b>1891年製のレール</b></a>が使われています');

　　addMarker(map, 135.03222942352295, 34.63281948891368, '<a href="http://maikonohama.la.coocan.jp/maiko/houdai.htm"><i><b>舞子砲台跡</b></i></a><br>　 幕末の歴史が眠っています');

　　addMarker(map, 135.03132820129394, 34.62858203477939, '<a href="http://maikonohama.la.coocan.jp/maiko/oohasi.htm"><i><b>明石海峡大橋</b></i></a><br>　 世界一の吊り橋です<br>　 <a href="http://www.hi-net.zaq.ne.jp/odagiri/hasi/hasi.htm"><b>橋の写真</b></a>もどうぞ');

　　addMarker(map, 135.03467559814453, 34.62985329374602, '<a href="http://maikonohama.la.coocan.jp/maiko/kindou.htm"><i><b>移情閣</b></i></a><br>　 呉錦堂の別荘｢松海山荘｣を前身とし、大正4年（1915）に別荘の東側に建てられた八角三層の楼閣。国重要文化財。');

}
//]]>
</script>
</head>
<body>
<table align="center">
　<tr>
　　<td>
　　　　<div id="map" style="width: 400px; height: 400px"></div>
　　</td>
　</tr>
</table>

</body>
</html>

このコードを実行する

 注 　 上のコードは、表示の形を整えるために全角の空白文字を使っています。コピーアンドペーストではエラーが出ます。実行例のソースを表示してコピーし、APIキーを自分用に書き換えて使ってください。
1　仕様
　 XHTML文書への埋め込みが推奨されています。文字体系はUTF-8と指定されています。が、XHTMLを意識しなくても今のところうまく動いているようです。
　 DOCTYPEの宣言などは、キーと一緒に送られてきたサンプルコードの先頭部分をコピーして使っています。
2　コントロールの張り付け（addControl）
　 GLargeMapControl（表示範囲の移動と拡大率の変更）、GMapTypeControl（地図と写真の切替）、GOverviewMapControl（概観図＝周辺案内図）、GScaleControl （縮尺表示）は地図を見るときに必要なものですから、まとめて張り付けるとよいでしょう。張り付ける場所（コーナー）は自動で決まりますが、場所の指定もできます。
3　表示する地域の指定（setCenter）
　 緯度（Latitude）経度（Longitude）のつぎに拡大率を 0（小）～17（大）の数字で指定します。大きな数で指定しても、その大きさの地図や写真がない場合もあります。そのつぎに普通の地図（G_NORMAL_MAP）か衛星写真（G_SATELLITE_MAP）かの指定をします。指定しなければ普通の地図を表示します。
4　吹き出し（InfoWindow）の幅の指定
幅の指定をしておかないと、文字列は折り返されずに横に伸びてしまいます。
5　マーカーの上にカーソルが乗ると吹き出しを表示する（mouseover）
一見便利そうな機能ですが、マーカーが狭い範囲にたくさん表示されていると、ちょっとした弾みでカーソルが移動して別の吹き出しが出てしまいます。
　 かえって不便を感じましたので、マーカーをクリック（click）したときに吹き出しを表示するようにしました。
6　地図の中央表示
<div id="map" style="width: 400px; height: 400px"></div>を centerタグで挟みます
　　 → 　<center><div id="map" style=～～></div></center>

　 この方法では、吹き出しの中の文字も中央そろえになってしまいます。そこで1行、1列の table の中に地図を書き、table を中央に配置しました。

やり残していること　 これからやりたいこと

  1. 表示する地図の大きさを窓いっぱいにする／横幅だけ／高さだけ
  2. マーカーの形や色を変える　　マーカーに文字を張り付ける
  3. いろんな形のマーカーを同時に表示する
  4. マーカーを一時的に隠し、必要なときに表示する
  5. なるべく簡単に多くのマーカーのコーディングをしたい（Java Scriptの問題？）
  6. 国土地理院の地形図との連携はできないか（現在の ZENRIN の地図はお粗末なので）
  7. 　　・・・　　・・・

Google Maps API の解説や地図の作製例のサイトを、関連リンク集で紹介していますのでご覧ください。


直前のページに戻る　 「Google Maps で遊ぶ」目次