Google Maps のカスタマイズ手順（XMLファイル使用） of Google Maps

Google Maps のカスタマイズ手順（XMLファイル使用）

（Google Maps API Ver.2 対応）

表示するポイントのデータは、HTMLファイルとは別のXMLファイルを使用する例である。
単一表示でも多地点同時表示でも同じ使い方である。
訂正：2008-1-11（「地形」の簡易組込み）
訂正：2006-10-26（最大ズーム倍率を19に）
訂正：2006-9-26（地図+写真を表示）
訂正：2006-9-24（xml関係記述変更）
訂正：2006-9-5（XHTML1.1仕様に変更、ラベル追加、ライン表示方法変更）
訂正：2006-9-4（ソース一部修正）
訂正：2006-9-1（「地図」「航空写真」表示の簡素化）
訂正：2006-8-23（地図座標取得ツール不具合により修正）
訂正：2006-8-22（地図座標取得ツール変更）
作成：2006-8-20
Google Maps のカスタマイズへ

1. Google Maps API key の取得

1. 次のWebを開く。
- http://www.google.com/apis/maps/

2. 「Sign up for a Google Maps API key」をクリックする。

3. 使用条件を読み、「I have read and agree with the API terms and conditions」にチェックを入れる。自分のWebサイトのURLを記入する。「Generate API Key」ボタンをクリックする。

4. すでに、Googleアカウントを持っておれば、メールアドレスとパスワードを書き、「サインイン」ボタンをクリックする。Googleアカウントを持っていない場合は、「今すぐアカウントの作成」をクリックして、手続きを行う。登録したメールアドレス宛に確認メールが来るので、メールに指定のURLをクリックすると、次の手順に移る。

5. Google Maps API key のページが開くので、このページを「名前を付けて保存（別名で保存）」しておくとよい。あるいは、key の文字列をコピーしてテキストファイルとして保存しておくとよい。この Google Maps API key は、一度取得するだけ良い。自分のWebサイトのURLが変わらなければ、何度手続きしても同じ key となる。ディレクトリ毎に取る必要は無く、トップディレクトリで取得すると、１つの key で上位から下位までのディレクトリで共通に使用できる。他のサイトの Google Maps API key を自分のサイトに取り込んでも動作しないので、必ず自分の Google Maps API key を入手して下さい。このページの下の欄に、アメリカのパルアルトの地図の使用例が記述されている。

2. HTMLファイルのカスタマイズ方法

1. 次のテンプレートをコピーして、HTMLファイルとして、文字コードは「UTF-8」で保存する。仕様は、XHTML 1.1 を使用しているので、閉じるタグに注意すること。JavaScriptを使用している。スタイルシートは必要に応じて使用する。青色部分は、任意で使用しなくてもよい。省略する場合は、全体のtableを再配置のこと。（注）2007/11/27に機能が追加になった「地形」表示は、単純に従来の標準のMapTypeボタンに追加するやり方にした。

<?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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps?file=api&v=2&key=Google Maps API key" type="text/javascript"></script>
<title>地図　三軒寺</title>
<script src="tlabel.2.05.js" type="text/javascript"> </script>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
</head>
<body onunload="GUnload()">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="5" style="width: 700px; color: #ffffff; background-color: #33ccff;">
<tr>
<td style="text-align: center; font-size: 150%; width: 100%; font-weight: bold;">三軒寺</td>
</tr>
</table>
</td>
<td valign="top" rowspan="4"><div id="sidebar" style="overflow:auto; margin-left:5px; line-height:150%; width:400px; height:670px;"></div></td>
</tr>
<tr>
<td valign="top"><div id="map" style="width: 700px; height: 480px"></div></td>
</tr>
<tr>
<td valign="top">
<div style="width: 700px; color: blue; font-size: 70%;">
左上にあるコントローラで、上下左右移動、元に戻す、縮小拡大が出来ます。地図をドラッグして、上下左右に動かすことが出来ます。<br />
右サイドの名前をクリックすると、地図上の場所をポイントして吹き出しを表示します。吹き出しから該当ページへリンクしています。<br />
吹き出し表示が消えた場合は、マーカーをクリックします。スライドバーを上（＋）側にすると、地域の詳細が確認出来ます。
</div>
</td>
</tr>
<tr>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="3" style="width: 700px; color: #ffffff; background-color: #33ccff;">
<tr>
<td style="text-align: center; font-size: 100%; width: 100%;">Copyright(C) YAMAMOTO Toshio</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var sidebar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34.781161,135.41556), 17);
map.addControl(new GMapTypeControl());
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl(new GSize(150,150)));
function createMarker(point, no, ban, name, html) {
var icon = new GIcon();
icon.image = "marker" + no + ".png";
icon.transparent = "markerTransparent.png";
icon.imageMap = [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];
icon.shadow = "shadow.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(10, 34);
icon.infoShadowAnchor = new GPoint(20, 34);
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
gmarkers[i] = marker;
htmls[i] = html;
sidebar_html += ban + ' ' + '<a href="javascript:myclick(' + i + ')">' + name + '</a><br />';
i++;
return marker;
}
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
function readMap(url) {
var request = GXmlHttp.create();
request.open("GET", url, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var j = 0; j < markers.length; j++) {
var latlng = markers[i].getAttribute("latlng");
var no = markers[j].getAttribute("no");
var html = markers[j].getAttribute("html");
var ban = markers[j].getAttribute("ban");
var name = markers[j].getAttribute("name");
var latlng = latlng.split(",");
var lat = parseFloat(latlng[0]);
var lng = parseFloat(latlng[1]);
var point = new GLatLng(lat,lng);
var marker = createMarker(point, no, ban, name, html);
map.addOverlay(marker);
}
document.getElementById("sidebar").innerHTML = sidebar_html;
var lines = xmlDoc.documentElement.getElementsByTagName("line");
for (var k = 0; k < lines.length; k++) {
var color = lines[k].getAttribute("color");
var width = parseFloat(lines[k].getAttribute("width"));
var opacity = parseFloat(lines[k].getAttribute("opacity"));
var points = lines[k].getElementsByTagName("point");
var pts = [];
for (var l = 0; l < points.length; l++) {
var latlng = points[l].getAttribute("latlng");
var latlng = latlng.split(",");
var lat = parseFloat(latlng[0]);
var lng = parseFloat(latlng[1]);
pts[l] = new GLatLng(lat,lng);
}
map.addOverlay(new GPolyline(pts, color, width, opacity));
}
var labels = xmlDoc.documentElement.getElementsByTagName("label");
for (var m = 0; m < labels.length; m++) {
var content = labels[m].getAttribute("content");
var id = labels[m].getAttribute("id");
var latlng = labels[m].getAttribute("latlng");
var anchor = labels[m].getAttribute("anchor");
var offset = labels[m].getAttribute("offset");
var opacity = labels[m].getAttribute("opacity");
var latlng = latlng.split(",");
var lat = parseFloat(latlng[0]);
var lng = parseFloat(latlng[1]);
var offset = offset.split(",");
var width = parseFloat(offset[0]);
var height = parseFloat(offset[1]);
var label = new TLabel();
label.id = id;
label.anchorLatLng = new GLatLng(lat, lng);
label.anchorPoint = anchor;
label.markerOffset = new GSize(width, height);
label.content = content;
label.percentOpacity = parseFloat(opacity);
map.addTLabel(label);
}
}
}
request.send(null);
}
readMap("sangen.xml");
}else{
window.alert("!! お使いのブラウザでは、Google Mapsは利用できません。 !!");
}
//]]>
</script>
</body>
</html>

2. API のバージョンを２にする。
- <script src="http://maps.google.com/maps?file=api&v=2&key=Google Maps API key" type="text/javascript"></script>
- var map = new GMap2(document.getElementById("map"));

3. 上記で入手した Google Maps API key を次のタグの key=以降に記入する。
- <script src="http://maps.google.com/maps?file=api&v=2&key=Google Maps API key" type="text/javascript"></script>

4. タイトルを記入する。
- <title>地図　三軒寺</title>

5. 地図を表示する大きさを決める。ここでは、700×480としている。
- <div id="map" style="width: 700px; height: 480px"></div>

6. 読込むXMLファイル名を記入する。この場合は、「sangen.xml」とした。。
- readMap("sangen.xml");

7. まず、「Google Maps」のトップページ（日本）を開く。
- http://maps.google.co.jp/

以下は、３地点の「三軒寺」の例で進める。この三軒寺とは、伊丹市内の法巌寺、正善寺、大蓮寺と三軒並んだお寺のことを指す。

8. まず、地図ページ作成する地域のランドマーク（この例なら伊丹市内のどこでもよい）を検索する。ランドマークを設定した方が、周辺の場所を探す場合に便利である。検索キーワード欄に、「伊丹市役所」を記入し、「検索」ボタンを押す。「伊丹市役所」にマークと吹き出しが付いたページが開く。左欄の「この場所をデフォルトに登録する」をクリックする。

「この場所をデフォルトに登録する」をクリックすると、次回からここがデフォルトの場所として表示される旨表示される。

9. 次からは「Google Maps」のトップページを開いても、デフォルトの場所（この場合は「伊丹市役所」）を中心としたページが開く。
- http://maps.google.co.jp/

10. まず、地図をドラッグして「法巌寺」を探す。見付かると「法巌寺」の中心をダブルクリックする。

11. 「このページのリンク」をクリックする。

12. その下にプルダウンが表示される。

13. その上部の窓の文字列の中から、先頭の数字（緯度）、コンマと後ろの数字（経度）を含めた文字列「34.781161,135.41556」をコピーする。
- http://maps.google.co.jp/?ie=UTF8&ll=34.781161,135.41556&spn=0.004128,0.004828&z=18&om=1

14. 便宜上「法巌寺」の位置を地図の中心と仮定して、コピーした文字列をsetCenterのデータとしてペーストする。地図の中心にしたい位置があれば、上記の方法で緯度と経度の値を取得する。

map.setCenter(new GLatLng(34.781161,135.41556), 17);

15. 地図のズームの度合い

map.setCenter(new GLatLng(34.781161,135.41556), 17);
ここで、17はズーム倍率であり、最大にズームした場合は19で、18, 17, 16, 15, …と減らすことで、ズームの度合いを落としていける。

16. 番号付きマーカー（アイコン）とそのシャドウを用意して、適当なフォルダに一括保存する。透過画像のためPNG形式とした。
- ・・・

icon.image = "marker" + no + ".png";　← no が番号に相当する。
icon.shadow = "shadow.png";

17. 自作のマーカー（アイコン）を使用する場合、吹き出しの影にあるマーカーがクリック出来ないことがある。そこで、マーカーと同じサイズの透明のTransparent画像を用意して、マーカーの形状の座標を定義する。
- icon.transparent = "markerTransparent.png";
- icon.imageMap = [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];

18. HTMLファイルを文字コード「UTF-8」で保存して、Ｗｅｂサーバにアップロードする。

3. XMLファイルのカスタマイズ

1. 次のテンプレートをコピーして、XMLファイル（ファイル属性＝.xml）として、文字コードは「UTF-8」で保存する。この場合のファイル名は、「sangen.xml」とする。

<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker latlng="34.781161,135.41556" no="01" html="１法巌寺" ban="１" name="法巌寺" />
<marker latlng="34.781091,135.415903" no="02" html="２正善寺" ban="２" name="正善寺" />
<marker latlng="34.780994,135.416139" no="03" html="３大蓮寺" ban="３" name="大蓮寺" />
</markers>

2. XMLファイルに三軒寺のデータを書き込む。上記などの方法により、「法巌寺」、「正善寺」、「大蓮寺」それぞれの位置の緯度・経度のデータを取得する。

<marker latlng="34.781161,135.41556" no="01" html="１法巌寺" ban="１" name="法巌寺" />
<marker latlng="34.781091,135.415903" no="02" html="２正善寺" ban="２" name="正善寺" />
<marker latlng="34.780994,135.416139" no="03" html="３大蓮寺" ban="３" name="大蓮寺" />
「latlng」は、緯度と経度のことである。（コピーアンドペーストを簡素化するため、コンマを含んだものにしてある。）
「no」は、マーカーの番号などを指定するパラメータである。この場合、"01"は１番のマーカーを指す。
「html」は、吹き出しに表示するデータである。ここでは簡単な例としたが、画像を貼付けたり、リンクを張ったりできる。
「ban」は、地図の右側に表示する地名などのラベルである。（この例では番号とした。リンクはされない。）
「name」は、地図の右側に表示する地名などである。ここをクリックすると地図上に吹き出しを表示するリンクとなる。
「html」、「ban」、「name」の内容にHTMLタグを含める場合は、「＆キーワード；」で表現する。（例：< → <、> → >、" → "）

3. XMLファイルをＷｅｂサーバにアップロードする。

4. 完成

1. 表示させてみる。
- 地図　三軒寺

マーカー（風船形アイコン）の１番をクリックすると、吹き出しが表示される。

右側の名前の１番をクリックすると、同様に吹き出しが表示される。

「航空写真」に切り替えて表示してみる。

5. 単一表示へのカスタマイズ

1. ここでは「伊丹市立鈴原小学校」の例で進めることとし、上記HTMLファイルを利用して、タイトルを記入する。
- <title>地図　伊丹市立鈴原小学校</title>

2. HTMLファイルへ読込むXMLファイル名を記入する。この場合は、「suzu.xml」とした。。
- readMap("suzu.xml");

3. XMLファイルにのデータを書き込む。鈴原小学校の緯度・経度のデータを上記と同様に取得する。
<marker latlng="34.773406,135.408895" no="N" html="伊丹市立鈴原小学校" ban="" name="" />
「no」は、番号の無いマーカーのため、"N"とした。
「html」は、吹き出しに表示するデータである。ここでは簡単な例としたが、画像を貼付けたり、リンクを張ったりできる。
「ban」は、地図の右側にラベルを表示させないため、記入しない。
「name」は、地図の右側に地名を表示させないため、記入しない。

4. 表示させてみる。
地図　伊丹市立鈴原小学校

マーカー（風船形アイコン）をクリックすると、吹き出しが表示される。

「航空写真」に切り替えて表示してみる。

6. 補足事項

1. ブラウザの判定をして、Google Maps を表示出来ない場合に、アラートを表示させる。
次のJavaScript文の部分である。
if (GBrowserIsCompatible()) {
・・・・・
}else{
window.alert("!! お使いのブラウザでは、Google Mapsは利用できません。 !!");
}

アラートの表示例（Microsoft Internet Explorer for Mac 5.2 の場合）

アラートが出たブラウザの表示例（地図の部分が空白）

2. JavaScript文の補足説明
- ポリラインのオーバレイ（このページの例では使用していない）
- Internet Explorer で適切にすべてが動くように、XHTMLドキュメントにVML名前空間といささかのCSSコードを含む必要がある。
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" xmlns:v="urn:schemas-microsoft-com:vml">
- <style type="text/css">
- v\:* {
- behavior:url(#default#VML);
- }
- </style>

3. ラインのオーバレイ表示
- 1. 訪問順の経路、領域の境界線などラインのオーバレイ表示は、上でマーカーを定義したXMLファイルに追加する。次のテンプレートを参照。

<?xml version="1.0" encoding="utf-8"?>
<markers>
<line color="#ff0000" width="3" opacity="0.45">
　<point latlng="34.781161,135.41556" />
　<point latlng="34.781091,135.415903" />
　<point latlng="34.780994,135.416139" />
</line>
<marker latlng="34.781161,135.41556" no="01" html="１法巌寺" ban="１" name="法巌寺" />
<marker latlng="34.781091,135.415903" no="02" html="２正善寺" ban="２" name="正善寺" />
<marker latlng="34.780994,135.416139" no="03" html="３大蓮寺" ban="３" name="大蓮寺" />
</markers>

2. XMLファイルに三軒寺のデータを書き込む。
上記などの方法により、「法巌寺」、「正善寺」、「大蓮寺」それぞれの位置の緯度,経度のデータを取得する。
<point latlng="34.781161,135.41556" />　//法巌寺の緯度,経度
<point latlng="34.781091,135.415903" />　//正善寺の緯度,経度
<point latlng="34.780994,135.416139" />　//大蓮寺の緯度,経度
「latlng」は、緯度と経度のことである。（コピーアンドペーストを簡素化するため、コンマを含んだものにしてある。）
<line color="#ff0000" width="3" opacity="0.45">
「color」は、引くラインの色を指定する。
「width」は、引くラインの幅（ピクセル値）を指定する。
「opacity」は、透過度を指定する。1.0が不透明となる。
HTMLタグを含める場合は、「＆キーワード；」で表現する。（例：< → <、> → >、" → "）

3. XMLファイルを文字コード「UTF-8」で保存して、Ｗｅｂサーバにアップロードする。

単純に、HTMLファイルに追記するには、次の例のように定義することで点をつなぐことが出来る。

var points = [
new GLatLng(A点の緯度, A点の経度),
new GLatLng(B点の緯度, B点の経度),
new GLatLng(C点の緯度, C点の経度)
];
var line = new GPolyline(points,'#ff0000',3,0.45);
map.addOverlay(line);

GLatLngの要素は、緯度,経度の順である。
最後のGLatLng行の後ろにはコンマが不要。
GPolylineには、カラー（この例は赤）、太さ（この例は3ピクセル）、透明度（この例は0.45）などの指定が可能。
SSIが利用可能なサーバなら、別ファイルとしてinclude文で読込むようにする。
色を変えた複数のラインオーバレイをする場合は、ファイルを分けるか定義を別にすればよい。

4. ラベルのオーバレイ表示
- 1. 地図の上にのせるラベルのオーバレイ表示は、上でマーカーとラインを定義したXMLファイルに追加する。次のテンプレートを参照。

<?xml version="1.0" encoding="utf-8"?>
<markers>
<label content="<div style='white-space: nowrap; color: #33ccff; font-size: 200%; background-color: #ffffff;'>三軒寺</div>"
id="sangendera" latlng="34.781989685585685,135.41589260101318" anchor ="center" offset="0,0" opacity="80">
</label>
<line color="#ff0000" width="3" opacity="0.45">
　<point latlng="34.781161,135.41556" />
　<point latlng="34.781091,135.415903" />
　<point latlng="34.780994,135.416139" />
</line>
<marker latlng="34.781161,135.41556" no="01" html="１法巌寺" ban="１" name="法巌寺" />
<marker latlng="34.781091,135.415903" no="02" html="２正善寺" ban="２" name="正善寺" />
<marker latlng="34.780994,135.416139" no="03" html="３大蓮寺" ban="３" name="大蓮寺" />
</markers>

2.ラベル「三軒寺」のデータを書き込む。

<label content="<div style='white-space: nowrap; color: #33ccff; font-size: 200%; background-color: #ffffff;'>三軒寺</div>"
id="sangendera" latlng="34.781989685585685,135.41589260101318" anchor ="center" offset="0,0" opacity="80">