このホームページもgoogleの地図を多数掲載しています。 この地図のメリットはなんといっても独自の場所を 複数アイコンで表示できるところにあり、閲覧者にとっても 大変わかりやすいものとなっています。もちろん日本に限らず世界中のどこでも設定が可能です。 操作は、航空写真の切り替え、ズームイン、ズームアウト、移動をマウスで行う事ができます。

もし、1つの目的場所をホームページに掲載するだけであれば、Google ローカルから目的の住所を入力し表示された後、ページのリンクというところをクリックすれば簡単に目的場所のＨＴＭＬのコードを取得する事が出来ます。単独でホームページに地図を表示するには大変便利な方法です。



作成するにあたって、
もっとも問題なのは、あの英語で書かれたgoogleのテキストを解読する事なのです。 普通そんなに英語に堪能な人は居ないものです。 私もその中の一人ですが、どうにか自分の思うように表現できたかなと思い、 もし、ホームページに同じように地図を掲載しようとする人の少しでも手助けになればと掲載に至りました。

１.文字コードの記述はＵＴＦ−８で記述、保存しなければ文字化けを起こしてしまい使用する事はできません。ＯＳがＭＥ以下であればメモ帳は対応していませんので、フリーソフトで対応のものを探せば作成する事ができます。

２.googleのマップを利用するためのライセンスキーが必要となります。下記のサイトからライセンスキーを取得します。

• googleマップライセンスキー



• サンプル地図コード

ここでサンプルコードにライセンスキーをペーストして、そのままページコードを作成し実行しても
サンプル地図が表示されるはずです。←ＵＴＦ−８の文字コードで保存する事が必要


３.サンプルでは小さなアイコンを複数表示できるようにしてあります。自分が表示したい場所の経度、緯度のデータを下記のリンク地図からポイントを探し出しクリックし取得します。

• 経度緯度を求める地図

４.サンプルコードの設定箇所にまずは地図の中心となる経度、緯度と約２０段階の
ズームアップ度から適当な数値を設定していきます。
因みに上記経緯度取得地図のズームアップ度は12です。

// 予め設定された位置を中央にに地図を表示します。Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(136.11373901367187,34.54615587076829),5);
//デフォルトはサテライトに設定します。私の好みです。地図の場合は(G_NORMAL_MAP)に変更
map.setMapType(G_SATELLITE_MAP);


５.次にサンプルコードの設定箇所に「地名　その１」からの設定（?０のpoint）から設定していきます。
// 各地点のマーカーポイントを緯度、経度で設定します。
var point = new GPoint(136.16396069526672,34.521125677398366);
var marker = createMarker(point,0);←このpointは最初０(ゼロ)から始まります
map.addOverlay(marker);

６.上に対応してと同時に
// マーカーは小さなアイコンで表現します。
if (index==0){　
var html =('「地名　その１」に対する必要なhtmlタグを記述します');
var mark_0 = document.getElementById("mark_0");
if(mark_0){mark_0.onclick = hyoji;};
};
※このときhtmlの内容に不必要な空白が入るとエラーになってしまいますので気をつけてコーディングすることが必要です。

７.同じく上に対応してbody内の地名を示す部分を記述します。

<li type=1 id="mark_0" style="padding:4px;">
<a href="javascript:void(0)" onclick="this.blur()" style="padding:4px;">
「地名　その１」</a></li>

８.これだけでも小さなアイコンが表示されます。そのpointをクリックしたとき、あるいは「地名　その１」をクリックすればウィンドウが表示される事になります。

９.あと順次自分が設定したい個数分だけを５〜７を繰り返します。
すべて　(point,0←)とmark_0←が対応している。
例　(point,5)ならば　mark_5に対応となる
要するには５〜７を繰り返す場合、(point,0←)とmark_0←の記述する番号を一致させるようにする。また、番号が飛ぶと表示されない。

10.設定の順番が飛び越されたり、コードミスがあると正常に表示されなくなりますので間違えのないようにコーディングしてください。

11.一度にすべてを記述してから表示させるより記述しながらこまめに表示していくと間違いがすぐに分かって修正も楽です。また、地図の大きさページ内の色についてはHTMLコードのタグを変更あるいはスタイルシートなどで設定してもらえればと思います。