地質データバンク

「シームレス地質図を表示する」のソースコードにプログラムを追加して、背景地図をGoogle Maps（ゼンリン）から電子国土に変更できるようにします。
従来、電子国土から提供されていた地図画像は、極に近づくに従って、縦長になるようなタイルとして提供されていました（電子国土Ver.3まで）。Google Mapsでは正方形のタイル画像で地図を表現する手法のため、当時はGoogle Mapsで電子国土を取り扱うには大変な苦労がありました。しかし電子国土Ver.4ではその仕様が変更され、256ピクセル四方の正方形タイルで地図画像を提供するようになりました。結果としてGoogle Maps JavaScript API V3で、簡便に取り扱うことが可能となりました。

ここでは、「電子国土を表示させるための関数」と「HTML本体」の二つのファイル構成で、Google Mapsに電子国土を組み込むことにします。

電子国土を組み込むための関数（CyberJapanForGoogleMaps関数）ソースコード

電子国土用関数を呼び出すソースコード

Google Mapsに電子国土を組み込むためのソースコードの解説

ソースコードの要点を説明します。
HTML本体のソースコードの改変と、新規JavaScript外部ファイルで構成されます。

電子国土を組み込むための関数（CyberJapanForGoogleMaps関数）の準備
上記の内、一つ目のソースコードになります。
Google Maps JavaScript API V3の、mapTypeを追加するための記述に従っています。上記ソースコードのうち、8行目から28行目が電子国土を表示するための特別な記述と言えます。WMTSで表現される地図のほとんどは、もっとシンプルな表現になります。二つ目のソースコードでシームレス地質図を呼び出す際にも似たような関数を用意するのですが、43行目から50行目で示すようにとてもシンプルです。
Google Mapsで背景地図として電子国土を使用する大抵の場合、この関数をそのまま流用することが出来ると思います。

HTML本体の調整
上記の内、二つ目のソースコードになります。
基本的なプログラム構造は、「シームレス地質図を表示する」と同じです。

15行目
電子国土を組み込むための関数を呼び出しています。
29行目から40行目
この部分で関数を実行して電子国土を表示させる準備をし、切り替えのためのボタンを配置しています。29行目と30行目で関数を実行し、電子国土を組み込んでいます。ここでは組み込みだけで、実際には電子国土は表示されませんし、切り替えるためのボタンも表示されません。
31行目から40行目が、切り替えるためのボタンを表示させる部分です。34行目の「'cyberjapan',」のない状態がデフォルトの記述だと考えてください（何もしなければそのように実行される想定です）。34行目を記述することによってボタンが配置されます。34行目の「'cyberjapan'」は30行目の「'cyberjapan'」の指定に合わせています。

上記ソースコードはこちらから実行出来ます。
実行すると、右上に「Cyber Japan V4」のボタンが追加され、それをクリックすると背景地図が電子国土に切り替わります。小縮尺ではGoogle Mapsの地図と比較して見劣りしますが、都心から離れた地域で拡大すると、電子国土のよさを実感しやすいです。
電子国土を加えたシームレス地質図