地理院地図とは、2013年10月30日に公開された、国土地理院の最新版の地図サイトです。電子国土Web（電子国土Webシステムをベースとする国土地理院の地図サイト）の後継として試験公開されていた電子国土Web.NEXTが、名称を改めて正式に公開されたものです。
地理院地図の公開と共に、地理院地図で用いられている地理院タイル（標準的な構成でタイル化された地図画像）の一般利用への提供が開始されました。地理院タイルの構成は業界標準に従っているため、多くの地図系ウェブシステムから取り扱うことが容易で、高度なウェブ地図の開発が可能になっています。
従来の電子国土Webシステムでは、国土地理院謹製の独自APIでウェブ地図の諸機能が提供されていましたが、新版ではAPIは提供されず、地図系ウェブシステムから地理院タイルを利用することにより、同等（あるいはそれ以上）の機能を実現します。地理院タイルを取り扱える地図系ウェブシステムの代表的なものとして、オープンソースJavaScriptライブラリのOpenLayersがあります。国土地理院でも、地理院タイル＋OpenLayersによるウェブ地図開発の技術情報を公開しています。本稿では、ルート地図の作成にOpenLayers 4.6.4を利用します。
なお、地理院地図という用語は、前述のとおり国土地理院の地図サイトを指しますが、本HPでは地理院タイル＋OpenLayersで実現される新版の電子国土Webシステムという意味合いで、本稿のタイトル等に用いています。
地理院タイルは、Webサイトでの地図の閲覧を目的とする限りは、自由に利用可能とされています。利用に当たっては、地理院タイルのご利用についてをご一読下さい。出所（国土地理院）の明示や印刷に関する制約等の利用条件があります。
ページ内に固定サイズの地図を表示する「ページ内表示」と、リンクをクリックすると別のページが開いて、ページ全面に地図を表示する「別ページ表示」の二つの方法を説明します。いずれの方法でも、マウス左ボタンを用いて地図のスクロール、マウスホイールや地図左上のボタンにより表示縮尺の変更ができます。GPSデータのアイコンをクリックすると、追加の説明がポップアップします。さらに、ShiftキーとAltキーを押しながら、地図をマウスの左ボタンでドラッグして回転させることができます。回転後、右上の矢印ボタンをクリックすると、回転がリセットされます。
別ページ表示では、ページのサイズを変えると地図の表示領域の大きさも追従して変化します。また、下部パネルのメニューにより、標準地図と写真の切り替えや、GPSデータの表示のON/OFF、印刷機能の呼び出しができます。
| ページ内表示 | |
| 別ページ表示 | ルート地図 |
これだけでも十分に素晴らしいルート地図が出来上がっていますが、OpenLayersの豊富な機能を利用すると、さらにいろいろなこと（Googleマップと切り替えて表示等）ができます。以下ではその基礎となる簡単なページを例題として、地理院地図利用のルート地図を表示する方法を説明します。
GPX2JSGIのGitHubのページで[Clone or download]、続いて[Download ZIP]をクリックして、gpx2jsgi-master.zipをダウンロードし、適当な場所で展開して下さい。docsフォルダの下に以降の説明で用いるファイル一式が入っています。
その他、ご自身独自のルート地図を作成する際には、地図に上乗せするKMLデータを用意する必要があります。なお、GPSデータのアイコンの表示位置や、アイコン右上に表示されるラベルの文字色やサイズを変更するには、GPX2JSGIのカスタマイズの項を参照して下さい。
例として、サイト内に次のようなディレクトリ構成で設置したomap_ex1.htmlにルート地図を表示する場合を説明します。リンクをクリックすると、当該ページを閲覧できます（ブラウザの戻るボタンで戻って下さい）。1ページに表示できる地理院地図版ルート地図の数に制限はありません。
public_html / index.html（トップページ） | +--gsimaps_wo_panel.html +--example / Mt_Hayama.kml +--omap_ex1.html
次にomap_ex1.htmlの内容を示します。これはHTML5で記述しています。ルート地図の表示のために追加するのは赤字の部分のみです。また、緑字は設定する必要があるパラメータを示します。gsimaps_wo_panel.htmlのファイル名は適宜変えても差し支えありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>地理院地図版ルート地図</title>
</head>
<body>
<iframe src="gsimaps_wo_panel.html?lat=37.864291&lon=140.672862&zoom=15&url=example/Mt_Hayama.kml" width="640" height="480">
</iframe>
</body>
</html>
各パラメータの意味は次のとおりです。これらのパラメータの設定はいずれも必須で、省略できません。
| パラメータ名 | 値の例 | 説明 |
|---|---|---|
| lat | 37.864291 | 表示領域の中心座標の緯度（世界測地系、単位：度） |
| lon | 140.672862 | 〃 経度 |
| zoom | 15 | ズームレベル（0〜18） |
| url | example/Mt_Hayama.kml | KMLファイルのURL（相対URLのみ） |
| width | 640 | 表示領域の横幅（ピクセル） |
| height | 480 | 〃 高さ |
KMLファイル（Mt_Hayama.kml）は、HTMLファイル（gsimaps_wo_panel.html）のURLを起点する相対URLでアクセスできる必要があります。これはセキュリティの問題（CRSF）を防止するため、異なる生成元からの読み込みがJavaScriptにより制限されているためです。
例として、サイト内に次のようなディレクトリ構成で設置したomap_ex2.htmlにルート地図を表示する場合を説明します。リンクをクリックすると、当該ページを閲覧できます（ブラウザの戻るボタンで戻って下さい）。当該ページ内の「ルート地図」のリンクをクリックすると、別の窓が開いてルート地図を表示します。この方法も1ページに設置できるルート地図の数は制限されません（ただし、同時に開けるルート地図は一つにしています）。
public_html / index.html（トップページ） | +--gsimaps.html +--example / Mt_Hayama.kml +--omap_ex2.html
次にomap_ex2.htmlの内容を示します。赤字はルート地図の表示のために追加した部分、緑字は設定する必要があるパラメータを示します。パラメータの意味は、ページ内表示の場合と同じです。ただし、パラメータheightには、表示領域の高さ＋30（ピクセル）の値を指定します。これらのパラメータの設定はいずれも必須で、省略できません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>地理院地図版ルート地図</title>
</head>
<body>
<p><a href="gsimaps.html?lat=37.864291&lon=140.672862&zoom=15&url=example/Mt_Hayama.kml"
onclick="return !window.open(this.href,'ROUTEMAP','width=640,height=510,resizable=yes');">ルート地図</a></p>
</body>
</html>