Gmap4地図の作り方

 

(事前準備)

Gmap4地図では、Gmap4サイト( https://mappingsupport.com/p/gmap4.php? )から、Googleサイト上に置かれたkmlファイルにリンクを貼る形で必要な地図を作成します。以下のGmap4地図例で赤色太字で表示されたurlは、Googleサイトに置かれたkmlファイルのurlです。

(ヒント1)Googleサイトの替わりにDropboxを使うことも出来ます。

(ヒント2)GoogleドライブやOneDriveは保存したkmlファイルが独自名称となるため使えません。

 

Gmap4地図例

https://mappingsupport.com/p/gmap4.php?q=https://sites.google.com/site/gmap4map/kml/2016xxxxtokyo_gmap4.kml

 

このためGmap4地図を作成するには、まずGoogleサイトを以下の手順で用意します。

 

1.Googleサイトにアクセスする。 https://www.google.com/sites/help/intl/ja/overview.html#

 

2.「サイトを作成してみましょう」をクリックします。

 

クリックで拡大

 

3.左上に赤字で「作成」と表示されるのでこれをクリックします。

クリックで拡大

4.サイトを作成画面に切り替わるので、以下のように選択します。

➀ 使用するテンプレート → 空のテンプレート(後で変更できる)

➁ サイトの名前 → gmap4map (別の名前でも可、後で変更できる)

➂ サイトの場所 → https://sites.google.com/gmap4map(このサイトurlは後で変更できない)

➃ テーマ → simplewhite (後で変更できる)

⑤ ロボットではありませんにチェック

最後に「作成」をクリックします。

クリックで拡大

 

5.Googleサイトの「ホーム」画面が表示されるので、右上の「ページを作成」をクリックします。

クリックで拡大

6.Googleサイトの「ページ作成」画面が表示されるので、以下のようにします。

➀ ページ名 → kml

➁ 使用するテンプレートを選択 → ファイルキャビネット

➂ ページを置く場所 → トップレベル

最後に「作成」をクリックします。

クリックで拡大

6.「kml」ページが表示されました。「ファイルを追加」をクリックするとパソコン上のファイルをGoogleサイトにアップロードできます。今後、ここにGmap4用のkmlファイルを追加していきます。ここに 20161007tokyoxxxxgmap4.kml というkmlファイルを保存すると、そのファイルのurlは以下となります。

保存kmlファイルのurl → https://sites.google.com/site/gmap4map/kml/20161007tokyoxxxxgmap4.kml

 

そしてGmap4地図のurlは以下となります。

https://mappingsupport.com/p/gmap4.php?q=https://sites.google.com/site/gmap4map/kml/20161007tokyoxxxxgmap4.kml

クリックで拡大


Gmap4用kmlファイル作成手順(地理院地図、eコミマップも同じ)

 

Gmap4用kmlファイル作成手順を以下に説明します。なお以下では「Googleマイマップの作り方」でGoogleマイマップ用kmlファイルを作成済みとして説明します。GoogleマイマップとGmap4のkmlファイル作成手順はほぼ同じですが、セルに挿入する値が異なり互換性はありません。

 

1.DITS地図用Googleスプレッドシートに「Gmap4」シートを追加します。

 

2.「Googleマイマップ」シートのA列〜I列をそのまま「Gmap4」シートにコピーします。

 

3.「Gmap4」シートのJ2セルに以下の式を記入します。

 

=IF(isblank(F2),"<Placemark><name>"&A2&"</name>"&"<description><![CDATA[ <table><td>"&$B$1&"</td><td>"&B2&"</td></tr><tr><td>"&$C$1&"</td><td>"&text(C2,"yyyy/m/d  HH:mm:ss")&"</td></tr><tr><td>"&$D$1&"</td><td>"&D2&"</td></tr><tr><td>"&$E$1&"</td><td>"&E2&"<br></td></tr><tr><td>"&$I$1&"</td><td><a href="""&I2&""" target=""_blank"">Googleマップ</a></td></tr></table> ]]></description><styleUrl>#PolyStyle1</styleUrl><Point><coordinates>"&H2&","&G2&"</coordinates></Point></Placemark>","<Placemark><name>"&A2&"</name>"&"<description><![CDATA[ <table><tr><td>"&$F$1&"</td><td><a href="""&F2&""" target=""_blank""> <img src="""&F2&""" height=""auto"" width=""300""></a></td></tr><tr><td>"&$B$1&"</td><td>"&B2&"</td></tr><tr><td>"&$C$1&"</td><td>"&text(C2,"yyyy.m.d  HH:mm:ss")&"</td></tr><tr><td>"&$D$1&"</td><td>"&D2&"</td></tr><tr><td>"&E$1&"</td><td>"&E2&"<br></td></tr><tr><td>"&$I$1&"</td><td><a href="""&I2&""" target=""_blank"">Googleマップ</a></td></tr></table> ]]></description><styleUrl>#PolyStyle1</styleUrl><Point><coordinates>"&H2&","&G2&"</coordinates></Point></Placemark>")

 

4.  J2セルをコピーし、J3〜J11セルに貼り付けます。

 

5.  K1セルに以下の値を貼り付けます。

 

<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><Style id="PolyStyle1"><IconStyle><Icon><href>http://cyberjapandata.gsi.go.jp/portal/sys/v4/symbols/080.png</href></Icon><scale>1</scale></IconStyle></Style>

 

6.  J12セルに以下の値を貼り付けます。

 

</Document></kml>

 

7.  K2セルに以下の式を記入します。

 

=k1&J2

 

8.  K2セルをコピーし、K3〜K12セルに貼り付けます。

 

9.  K12セルに Gmap4用kml が生成されます。

 

クリックで拡大

 

10.  K12セルをコピーし、(メモ帳などの)テキストエディターに貼り付けパソコンに保存します。

ここではファイル名を 2016xxxxtokyo_gmap4.kml とします。

 

11. このkmlファイルを事前準備で用意したGoogleサイトに保存します。保存ファイルurlは以下となります。

 

https://sites.google.com/site/gmap4map/kml/2016xxxxtokyo_gmap4.kml

 

12.   このurlをGmap4地図にリンクさせます。

 

https://mappingsupport.com/p/gmap4.php?q=https://sites.google.com/site/gmap4map/kml/2016xxxxtokyo_gmap4.kml

 

13.   Gmap4地図が表示されることを確認します。

 

なお、標準地図の替わりに衛星地図にしたい時はこのurlの後に &t=s を追加します。

更に ズームレベルを変えたい時はurlの後に &z=18  などを追加します。

 

https://mappingsupport.com/p/gmap4.php?q=https://sites.google.com/site/gmap4map/kml/2016xxxxtokyo_gmap4.kml&t=s&z=18


(参考)

Gmap4または地理院では、kmlファイルは以下の構成となっています。DITSデータ1件毎に<placement> xxxxxxx</placement>のデータが追加されます。kml作成手順3でJ2セルに貼り付けた式はこれを関数に置換えたものです。写真無しDITSと写真付きDITSで処理を変えています。K1セルのhttp://cyberjapandata.gsi.go.jp/portal/sys/v4/symbols/080.pngは地理院地図のアイコンurlです。アイコンを入れ替えるにはこのurlを変更します。

 

<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><Style id="PolyStyle1"><IconStyle><Icon><href>http://cyberjapandata.gsi.go.jp/portal/sys/v4/symbols/080.png</href></Icon><scale>1</scale></IconStyle></Style>

 

<Placemark>

<name> そらまち亭</name>

<description><![CDATA[ <table><tr><td>クリック拡大</td><td><a href="https://pbs.twimg.com/media/Ctq6WM_UkAASLJg.jpg" target="_blank"> <img src="https://pbs.twimg.com/media/Ctq6WM_UkAASLJg.jpg" height="200" width="auto" "="" alt=""></a></td></tr>

<tr><td>username</td><td>tujikawa</td></tr>

<tr><td>date</td><td>Sat Oct 01 2016 17:57:29 GMT+0900 (JST)</td></tr>

<tr><td>address</td><td>東京都墨田区押上1丁目1</td></tr>

<tr><td>text</td><td> そらまち亭<br></td></tr>

<tr><td>拡大地図</td><td><a href="https://goo.gl/KVCsyt" target="_blank">Googleマップ</a></td></tr></table> ]]></description>

<styleUrl>#PolyStyle1</styleUrl>

<Point><coordinates>139.81304353490103,35.710231702943</coordinates></Point>

</Placemark>

 

</Document></kml>