Googleマップ版ルート地図

更新情報（2018-02-06）：Google Maps APIのリクエストURLを更新。
更新情報（2014-11-03）：全面的にリニューアルしました。
このサイトに関するご意見・ご質問・ご要望は、サポート掲示板へお願いします。

表示例

ページ内に固定サイズの地図を表示する「ページ内表示」と、リンクをクリックすると別のページが開いて、ページ全面に地図を表示する「別ページ表示」の二つの方法を説明します。

いずれの方法でも、マウス左ボタンを用いて地図のスクロール、マウスホイールや地図左上のボタンにより表示縮尺の変更ができます。GPSデータのアイコンをクリックすると、説明がポップアップします。また、地図右上のボタンで航空写真に切り替えることができます。

別ページ表示では、ページのサイズを変えると地図の表示領域の大きさも追従して変化します。また、GPSデータの表示のON/OFFや印刷等の機能を呼び出すメニューがついています。

ベージ内表示
別ページ表示	ルート地図

設置方法

準備

まず、Google Maps APIにアクセスして、Google Maps JavaScript APIのキーを取得する必要があります。無料で利用できるのは、1日あたりのマップロードが25,000 回までという制限があります。以下では、取得したAPIキーをAPI_KEYと表記します。

ダウンロードのページから、gpsweb-X.X.zip（X.Xはバージョン番号）の最新版をダウンロードし、適当な場所で展開して下さい。以降の説明で用いるファイル一式が入っています。

その他、ご自身独自のルート地図を作成する際には、地図に上乗せするGPSデータをKML形式で用意する必要があります。

ページ内表示

例として、サイト内に次のようなディレクトリ構成で設置したgmap_ex1.htmlにルート地図を表示する場合を説明します。リンクをクリックすると、当該ページを閲覧できます（ブラウザの戻るボタンで戻って下さい）。この方法では、1ページに表示できるGoogleマップ版ルート地図は一つに制限されます。

ディレクトリ構成例

public_html / index.html（トップページ）
	|
	+--js / gmap.js
	+--example / Mt_Hayama.kml
	+--gmap_ex1.html

次にgmap_ex1.htmlの内容を示します。赤字はルート地図の表示のために追加した部分、緑字は設定する必要があるパラメータを示します。

gmap_ex1.html

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Googleマップ版ルート地図</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script type="text/javascript" src="js/gmap.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload = function() {
	init_gmap({
		div: 'map_google',
		lng: 140.672862, lat: 37.864291, zoom: 15,
		url: 'https://anineco.nyanta.jp/gpx2jsgi/example/Mt_Hayama.kml'
	});
};
//]]></script>
</head>
<body>
<div id="map_google" style="width: 640px; height: 480px;"></div>
</body>
</html>

各パラメータの意味は次のとおりです。

パラメータ名	値の例	説明
div	`map_google`	地図を設置するdiv要素のid
lng	`140.672862`	表示領域の中心座標の経度（世界測地系、単位：度）
lat	`37.864291`	〃　　　　　経度
zoom	`15`	ズームレベル
url	`https://anineco.nyanta.jp/gpx2jsgi/example/Mt_Hayama.kml`	KMLファイルのURL
id	`map_google`	divパラメータと同じ識別名
width	`640px`	表示領域の横幅
height	`480px`	〃　　高さ

gmap_ex1.htmlは、Mt_Hayama.kmlの他に、次の2つのファイルを読み込んでいます。

URL	説明
https://maps.googleapis.com/maps/api/js?key=`API_KEY`	Google Maps API
js/gmap.js	上記APIを呼び出すJavaScriptファイル

通常、これらを変更する必要はありませんが、1ページに複数のGoogleマップ版ルート地図を表示する場合や、他のJavaScriptライブラリを同時に利用している場合、Googleマップの機能をもっと活用したい場合には、gmap.jsの内容を理解して変更する必要があります（HTML+CSS+JavaScriptの知識がある人向け）。

別ページ表示

例として、サイト内に次のようなディレクトリ構成で設置したgmap_ex2.htmlにルート地図を表示する場合を説明します。リンクをクリックすると、当該ページを閲覧できます（ブラウザの戻るボタンで戻って下さい）。当該ページ内の「ルート地図」のリンクをクリックすると、別の窓が開いてルート地図を表示します。この方法では、1ページに設置できるルート地図の数は制限されません（ただし、同時に開けるルート地図は一つにしています）。

ディレクトリ構成例

public_html / index.html（トップページ）
	|
	+--googlemap.html
	+--js / routemap.js
	+--example / Mt_Hayama.kml
	+--gmap_ex2.html

googlemap.htmlの中のAPI_KEYと基準URL（下記の緑字の部分）は、設置したサイトに合わせて変更して下さい。

googlemap.html（抜粋）

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script type="text/javascript">//<![CDATA[
google.maps.event.addDomListener(window, 'load', function() {
	var baseurl = 'https://anineco.github.io/gpx2jsgi/'; // 基準URL

次にomap_ex2.htmlの内容を示します。赤字はルート地図の表示のために追加した部分、緑字は設定する必要があるパラメータを示します。パラメータの意味は、ページ内表示の場合と同じです。なお、パラメータurlに相対URLを指定した場合は、基準URLからの相対URLとなります。4つのパラメータはいずれも必須で、省略できません。

gmap_ex2.html

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>Googleマップ版ルート地図</title>
<script type="text/javascript" src="js/routemap.js"></script>
</head>
<body>
<p><a href="googlemap.html?lat=37.864291&amp;lng=140.672862&amp;zoom=15&amp;url=example/Mt_Hayama.kml"
 onclick="return routemap(this.href)">ルート地図</a></p>
</body>
</html>

地図の表示領域の大きさを変更したい場合は、routemap.js内のパラメータを変更します。

routemap.js

function routemap(url) {
	window.open(url,'ROUTEMAP','width=640,height=510,resizable=yes');
	return false;
}

パラメータheightには、表示領域の高さ＋30（ピクセル）の値を指定します。