2013年11月19日更新
日本シームレス地質図は，自分のページに自由に埋め込んで使用することができます．使用料を支払ったり，許諾を得たりする必要はありません．また，ここで紹介するような，簡単に埋め込んで利用するための機能も提供しています．自分のページにシームレス地質図を埋め込んで，どんどん利用しましょう．
※このサービスは現在テスト中です．ご利用はできますが，仕様が変わる可能性があります
シームレス地質図をホームページで利用するにはいくつか方法がありますが，ここでは最も簡単な方法を紹介します．JavaScriptを一切記述せずに，しかも自分のデータを重ねて表示させることもできます．
ここで紹介する方法は，日本シームレス地質図のMyシームレス（仮称）というサービスを利用しています．Myシームレスは埋め込み用に特化したページを提供しています．Mｙシームレスを利用するのは極めて簡単です．例えば，もっともシンプルにはHTML中の埋め込みたい場所に以下の1行を記述するだけです．
<iframe src="http://gsj-seamless.jp/labs/my/mymap.html"></iframe>
このページに上記を組み込むと，以下のように東京周辺のシームレス地質図が表示されます．この記述だけで，このページはGoogleマップと同様に地図を移動したり，拡大したりできます．
sample1.html
上記のサンプルでは，地図の範囲は小さいし，また最初に常に東京周辺が表示されます．しかし，Myシームレスでは表示を様々にカスタマイズできます．
まず，地図の大きさを変更するには，<iframe>要素にstyle属性を追加して，width, heightプロパティで指定するようにします．たとえば以下のように記述します．
<iframe src="http://gsj-seamless.jp/labs/my/mymap.html" style="width:400px; height:300px;"> </iframe>
表示は以下のようになります．
sample2.html
また，<iframe>要素のsrc属性の"http://gsj-seamless.jp/labs/my/mymap.html"の後に様々なパラメータを指定することができます．たとえば富士山 (北緯35.3606°, 東経138.7274°) を表示するには以下のようにします．
<iframe src="http://gsj-seamless.jp/labs/my/mymap.html?latlng=35.3606,138.7274"
style="width:600px; height:400px;">
</iframe>
sample3.html
指定できるパラーメータには以下のようなものがあります．
| パラメータ | デフォルト値 | 内容 | サンプル |
|---|---|---|---|
| base | road | ベースマップの種類を道路地図(road), 航空写真(photo), 地理院地図(chiriin)またはタイルサービステンプレートで指定します(*注)．タイルサービステンプレートを指定した場合は，カンマに続けてレイヤー名を指定することができます． 2013年11月現在，chiriinが指定された場合，地理院タイル標準地図は全国整備されていないため，旧版(std2012)が使用されます． |
base=chiriin |
| bbox | なし | 表示範囲を，北端，西端，南端，東端の順にカンマ区切りで指定します | bbox=41,139,39,140 |
| latlng | なし | 地図の中心となる緯度，経度をカンマで区切って指定します （これを指定せずにlayerでkmlファイルを指定すると， kmlファイルの指定により表示位置が変更されます） |
latlng=36.22,140.13 |
| layer | なし | 地質図の上に表示させるデータを，KMLファイルのurlまたはタイルサービステンプレート(*注)で指定します．これらのファイルは公開URL上に配置する必要があります．複数指定も有効で，その場合後に指定したものが上に重なります． | layer=https://gbank.gsj.jp/seamless/ sample/geomeister2011_mini.kmz |
| marker | なし | 緯度，経度をカンマで区切りで指定してマーカーを表示させます．カンマで区切って，バルーンで表示させる文字を指定することもできます． 複数指定可能です．地図の位置は（最後の）マーカーの位置に移動します． |
marker=35.3606,138.7274,富士山&marker=35.2381,138.7939,愛鷹山 |
| maxz | 13 | 最大ズームレベル | maxz=10 |
| minz | 5 | 最小ズームレベル | minz=6 |
| scale | on | スケールラインの表示(on)/非表示(off) | scale=off |
| seamless | detailed | 日本シームレス地質図の基本版(basic)または 詳細版(detaield)，またはoffで非表示を指定します． カンマに続けて不透明度(0～1)を指定することも可能です |
seamless=basic,0.3 |
| z | 11 | 表示ズームレベル | z=8 |
*注 タイルサービステンプレート
地図タイル配信サービス（地図データをタイル分割して提供するサービス）を利用するためのものです．個々のタイルのURLが得られるようなテンプレート文字列を指定します．テンプレートは，グーグルマップ互換のタイル座標値を{z}, {y}, {x}の書式で埋め込んで使用します．
例1) 地理院タイル標準地図
http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png
例2) 地質調査総合センターの重力図（ブーゲー異常）
https://gbank.gsj.jp/tilemap/wmts/1.0.0/BouguerAnomaly230/default/EPSG900913/{z}/{y}/{x}.png
markerパラメータを使って，地図上にマーカを表示することができます．markerパラメータは複数指定することができます．パラメータには緯度，経度，テキストを指定します．以下では，富士山と愛鷹山を表示してズームレベルを9に変更しています．
<iframe
src="http://gsj-seamless.jp/labs/my/mymap.html?marker=35.3606,138.7272,富士山&marker=35.2381,138.7939,愛鷹山&z=9"
style="width:400px; height:300px;">
</iframe>
sample4.html
多量のマーカーをプロットしたい場合は，KMLファイルを利用すると便利です．データはKMLファイルとしてあらかじめ準備しておき，"layer"パラメータで指定します．KMLファイルは，地図情報を保存するための国際標準フォーマットで，GoogleEarthなどで簡単に出力することができます．作成したKMLファイルはネット上で参照できるサーバにアップロードしておきます．
たとえば以下のように記述します．
<iframe
src="http://gsj-seamless.jp/labs/my/mymap.html?layers=https://gbank.gsj.jp/seamless/sample/geomeister2011_mini.kmz"
style="width:400px; height:300px;">
</iframe>
sample5.html
layerパラメータでは，地図タイルサービスを利用できます．近年，地質調査総合センターをはじめ，国土地理院，株式会社エコリス等から，相次いで無料で利用できる地図タイルサービスが公開されています．layerパラメータでは，個々のタイルを参照できるようにタイルURLテンプレートの形で指定します．
例えば，地質調査総合センターの重力図（ブーゲー異常，仮定密度2.30 g/cm3）は以下のテンプレートで参照できます．
https://gbank.gsj.jp/tilemap/wmts/1.0.0/BouguerAnomaly230/default/EPSG900913/{z}/{y}/{x}.png
これを利用する例は以下のようになります．
<iframe
src="http://gsj-seamless.jp/labs/my/mymap.html?layers=https://gbank.gsj.jp/tilemap/wmts/1.0.0/BouguerAnomaly230/default/EPSG900913/{z}/{y}/{x}.png"
style="width:400px; height:300px;">
</iframe>
sample6.html
最後に，実際にホームページに埋め込む際の注意・ヒントをご紹介します．
本サービスは，Google Maps JavaScript APIを使用しており，地図画像そのもの利用にあたってはその利用規約に従う必要があります．例えば，Webブラウザ上で閲覧するだけなら問題はありませんが，それを印刷して使用する場合などが該当します．地理院地図の場合はA3までは印刷して利用できます．
古いブラウザでは<iframe>要素に対応していなかったり，またセキュリティ上使用できない設定にしている方もいらっしゃいます．そういう方のブラウザでは，<ifrmae>と</iframe>で囲まれた範囲の内容が表示されますので，通常はその部分にメメッセージを書き込んでおきます．たとえば以下のように記述します．
<iframe
src="http://gsj-seamless.jp/labs/my/mymap.html" style="width:400px; height:300px;">
iframe対応のブラウザでご利用ください
</iframe>