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 の取得

  • 2. 「Sign up for a Google Maps API key」をクリックする。
    • map001.jpg
  • 3. 使用条件を読み、「I have read and agree with the API terms and conditions」にチェックを入れる。自分のWebサイトのURLを記入する。「Generate API Key」ボタンをクリックする。
    • map002.jpg
  • 4. すでに、Googleアカウントを持っておれば、メールアドレスとパスワードを書き、「サインイン」ボタンをクリックする。Googleアカウントを持っていない場合は、「今すぐアカウントの作成」をクリックして、手続きを行う。登録したメールアドレス宛に確認メールが来るので、メールに指定のURLをクリックすると、次の手順に移る。
    • map003.jpg
  • 5. Google Maps API key のページが開くので、このページを「名前を付けて保存(別名で保存)」しておくとよい。あるいは、key の文字列をコピーしてテキストファイルとして保存しておくとよい。この Google Maps API key は、一度取得するだけ良い。自分のWebサイトのURLが変わらなければ、何度手続きしても同じ key となる。ディレクトリ毎に取る必要は無く、 トップディレクトリで取得すると、1つの key で上位から下位までのディレクトリで共通に使用できる。他のサイトの Google Maps API key を自分のサイトに取り込んでも動作しないので、必ず自分の Google Maps API key を入手して下さい。このページの下の欄に、アメリカのパルアルトの地図の使用例が記述されている。
    • map004.jpg

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&amp;v=2&amp;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 のバージョンを2にする。
    • <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;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&amp;v=2&amp;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");
  • 以下は、3地点の「三軒寺」の例で進める。この三軒寺とは、伊丹市内の法巌寺、正善寺、大蓮寺と三軒並んだお寺のことを指す。
  • 8. まず、地図ページ作成する地域のランドマーク(この例なら伊丹市内のどこでもよい)を検索する。ランドマークを設定した方が、周辺の場所を探す場合に便利である。検索キーワード欄に、「伊丹市役所」を記入し、「検索」ボタンを押す。「伊丹市役所」にマークと吹き出しが付いたページが開く。左欄の「この場所をデフォルトに登録する」をクリックする。
    • map006.jpg
  • 「この場所をデフォルトに登録する」をクリックすると、次回からここがデフォルトの場所として表示される旨表示される。
    • map007.jpg
  • 9. 次からは「Google Maps」のトップページを開いても、デフォルトの場所(この場合は「伊丹市役所」)を中心としたページが開く。
  • 10. まず、地図をドラッグして「法巌寺」を探す。見付かると「法巌寺」の中心をダブルクリックする。
    • map101.jpg
  • 11. 「このページのリンク」をクリックする。
    • map102.jpg
  • 12. その下にプルダウンが表示される。
    • map301.jpg
  • 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形式とした。
    • marker01.pngblank.pngmarker02.pngblank.pngmarker03.pngblank.pngmarker04.pngblank.pngmarker05.png・・・marker100.png
    • shadow.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」で保存して、Webサーバにアップロードする。

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="1 法巌寺" ban="1" name="法巌寺" />
<marker latlng="34.781091,135.415903" no="02" html="2 正善寺" ban="2" name="正善寺" />
<marker latlng="34.780994,135.416139" no="03" html="3 大蓮寺" ban="3" name="大蓮寺" />
</markers>

  • 2. XMLファイルに三軒寺のデータを書き込む。上記などの方法により、「法巌寺」、「正善寺」、「大蓮寺」それぞれの位置の緯度・経度のデータを取得する。
  • <marker latlng="34.781161,135.41556" no="01" html="1 法巌寺" ban="1" name="法巌寺" />
  • <marker latlng="34.781091,135.415903" no="02" html="2 正善寺" ban="2" name="正善寺" />
  • <marker latlng="34.780994,135.416139" no="03" html="3 大蓮寺" ban="3" name="大蓮寺" />
  • 「latlng」は、緯度と経度のことである。(コピーアンドペーストを簡素化するため、コンマを含んだものにしてある。)
  • 「no」は、マーカーの番号などを指定するパラメータである。この場合、"01"は1番のマーカーを指す。
  • 「html」は、吹き出しに表示するデータである。ここでは簡単な例としたが、画像を貼付けたり、リンクを張ったりできる。
  • 「ban」は、地図の右側に表示する地名などのラベルである。(この例では番号とした。リンクはされない。)
  • 「name」は、地図の右側に表示する地名などである。ここをクリックすると地図上に吹き出しを表示するリンクとなる。
  • 「html」、「ban」、「name」の内容にHTMLタグを含める場合は、「&キーワード;」で表現する。(例:< → &lt;、> → &gt;、" → &quot;)
  • 3. XMLファイルをWebサーバにアップロードする。

4. 完成

  • マーカー(風船形アイコン)の1番をクリックすると、吹き出しが表示される。
    • map202.jpg
  • 右側の名前の1番をクリックすると、同様に吹き出しが表示される。
    • map203.jpg
  • 「航空写真」に切り替えて表示してみる。
    • map204.jpg

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」は、地図の右側に地名を表示させないため、記入しない。
  • マーカー(風船形アイコン)をクリックすると、吹き出しが表示される。
    • map206.jpg
  • 「航空写真」に切り替えて表示してみる。
    • map207.jpg

6. 補足事項

  • 1. ブラウザの判定をして、Google Maps を表示出来ない場合に、アラートを表示させる。
  • 次のJavaScript文の部分である。
  • if (GBrowserIsCompatible()) {
  • ・・・・・
  • }else{
  • window.alert("!! お使いのブラウザでは、Google Mapsは利用できません。 !!");
  • }
  • アラートの表示例(Microsoft Internet Explorer for Mac 5.2 の場合)
    • map017.jpg
  • アラートが出たブラウザの表示例(地図の部分が空白)
    • map109.jpg
  • 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="1 法巌寺" ban="1" name="法巌寺" />
<marker latlng="34.781091,135.415903" no="02" html="2 正善寺" ban="2" name="正善寺" />
<marker latlng="34.780994,135.416139" no="03" html="3 大蓮寺" ban="3" 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タグを含める場合は、「&キーワード;」で表現する。(例:< → &lt;、> → &gt;、" → &quot;)
  • 3. XMLファイルを文字コード「UTF-8」で保存して、Webサーバにアップロードする。
  • 単純に、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文で読込むようにする。
  • <!--#include virtual="line.txt" -->
  • 色を変えた複数のラインオーバレイをする場合は、ファイルを分けるか定義を別にすればよい。
  • 4. ラベルのオーバレイ表示
    • 1. 地図の上にのせるラベルのオーバレイ表示は、上でマーカーとラインを定義したXMLファイルに追加する。次のテンプレートを参照。

<?xml version="1.0" encoding="utf-8"?>
<markers>
<label content="&lt;div style='white-space: nowrap; color: #33ccff; font-size: 200%; background-color: #ffffff;'&gt;三軒寺&lt;/div&gt;"
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="1 法巌寺" ban="1" name="法巌寺" />
<marker latlng="34.781091,135.415903" no="02" html="2 正善寺" ban="2" name="正善寺" />
<marker latlng="34.780994,135.416139" no="03" html="3 大蓮寺" ban="3" name="大蓮寺" />
</markers>

  • 2.ラベル「三軒寺」のデータを書き込む。
  • <label content="&lt;div style='white-space: nowrap; color: #33ccff; font-size: 200%; background-color: #ffffff;'&gt;三軒寺&lt;/div&gt;"
  • id="sangendera" latlng="34.781989685585685,135.41589260101318" anchor ="center" offset="0,0" opacity="80">
  • 「content」は、ラベルとして表示する内容と、スタイルシートで文字の色、文字の大きさ、背景の色などを指定する。
  • HTMLタグを含める場合は、「&キーワード;」で表現する。(例:< → &lt;、> → &gt;、" → &quot;)
  • 「id」は、ラベルをユニークに識別できる名前を付ける。複数のラベルを同時に表示させる場合には、特に重要。
  • 「latlng」は、ラベルを貼付けるアンカーの緯度と経度のことである。(コピーアンドペーストを簡素化するため、コンマを含んだものにしてある。)
  • 「anchor」は、アンカーの位置を指定する。 (*下記)
  • 「offset」は、オフセットの値。最初の値はwidth幅でx座標、次の値はheight高さでy座標を示す。(両方の間にコンマを含んだものにしてある。)
  • 「opacity」は、透過度を指定する。100が不透明となる。
  • 3. XMLファイルを文字コード「UTF-8」で保存して、Webサーバにアップロードする。
  • 4. HTMLファイルに、次のライブラリ(javascript)を追加する。(HTMLファイルのテンプレートには表示済み)
  • <script src="tlabel.2.05.js" type="text/javascript"> </script>
  • 「tlabel.2.05.js」は、A Google Maps API Extensionから取得して、Webサーバにアップロードする。
  • 単純に、HTMLファイルに追記するには、次の例のように定義することでラベルを表示することが出来る。
  • var content = ' <div style="ラベル表示のスタイルシート定義">ラベルの文字列</div>'
  • var label = new TLabel(); //TLabel オブジェクトの生成
  • label.id ='xxxxx'; //ラベル毎にIDを付ける
  • label.anchorLatLng = new GLatLng(ラベルアンカーの緯度,ラベルアンカーの経度);
  • label.anchorPoint = 'center'; //アンカーの位置 (*)
  • label.markerOffset = new GSize(0,0); //オフセット
  • label.content = content; //ラベルに表示する内容=上で定義
  • label.percentOpacity = 80; //透明度合い
  • map.addTLabel(label); //ラベルを地図に追加
  • アンカーの位置 (*)には、次の種類がある。
  • topLeft、topCenter、topRight、bottomLeft、bottomCenter、bottomRight、midLeft、center、midRight
  • SSIが利用可能なサーバなら、別ファイルとしてinclude文で読込むようにする。
  • <!--#include virtual="line.txt" -->
  • 複数のラベルを表示する場合は、ファイルを分けるか定義を別にすればよい。
  • 「三軒寺」をラインで結び、ラベルを表示した例である。
  • 地図 三軒寺
  • map213.jpg
  • 5. 地図座標取得ツールの利用
  • 次の例のような「地図座標取得ツール(伊丹市版)」を利用して、地図の座標を知ることも出来る。数値を小数点6桁以下に丸めて表示している。
  • GLatLng関数のためには、「クリック地点の緯度,経度」をコピーアンドペーストする。
  • GPoint関数のためには、「クリック地点のx座標,y座標」をコピーアンドペーストする。
  • クリック地点の表示は、シングルクリックでよい。
  • 地図をドラッグして、目当ての地点を中央のマーカーに合わせると、「緯度,経度」ならびに「x座標,y座標」と「ズーム倍率」が表示される。
  • 任意の場所をダブルクリックすると、その地点が中央マーカーの位置まで移動して、緯度,経度ならびにx座標,y座標とズーム倍率が表示される。
  • map211.jpg
  • 全国広域用には、「地図座標取得ツール(全国版)」を利用するとよい。数値を小数点6桁以下に丸めて表示している。
  • map212.jpg

以上