Goma-An

概要

Google Maps APIを利用して，ウェブサイトにGoogleマップや国土地理院の地図を組み込んで，地図上の緯度・経度で指定した場所にマーカーや図形を描き，その属性情報を表示することができます。 KMLファイルやGPXファイルを読み込んで表示させることもできます。 これを実現するためのHTML，JavaScript，ユーザー・データ入力用のテンプレート等の関係するファイル一式のセットです。

サンプル

• サンプルのウェブページ（タイプＡ）
• サンプルのウェブページ（タイプＢ）
• サンプルのウェブページ（タイプＣ）

使用条件

• 本ソフトウェアは Google Maps API を利用します。 Google Maps APIの利用規約をよくお読みになってからご利用ください。
• 本ソフトウェアでは地理院タイルほか複数の外部の地図画像提供サービスを使用します。 readme.txt ファイルの内容をよくお読みになってからご利用ください。

ダウンロード

• gomaan.zip (Version 3.8.20 / 2018.02.16)

改版履歴

• Version 3.8.20 / 2018.02.16
  GeoJSONファイル，KMLファイルについてレイヤ名を設定可能にしました。データファイルにて記述したフィーチャーとは別に，ファイルごとに一つのレイヤとなります。
  キャッシュの扱いを変更しました。（データファイルはキャッシュ無効，GeoJSONおよびGPXはファイルごとに指定可）
• Version 3.8.18 / 2018.01.31
  データファイル（gomaan.txt, gomaan.xls）における地図初期表示設定のための識別符号を“map”から“view”に変更しました。
  上載せ情報がJSONファイル，KMLファイルのみの場合にレイヤの表示切替ができない不具合を修正しました。
• Version 3.8.17 / 2018.01.30
  画面タイプＣにおいて，情報表示エリア（地図以外の部分）の表示／非表示が切り替えられるようになりました。
  地理院タイルの白地図に対応しました。
  地理院タイルに加えて，今昔マップ，農研機構の地図タイルのHTTPS通信にも対応しました。
  データファイルでズームレベルの最大値・最小値を指定が可能になりました。
  そのほか，細部の修正・改善を行いました。
• Version 3.8.12 / 2017.05.04
  地理院タイルのシームレス空中写真に対応したほか，地図タイル関係の修正・変更を行いました。
  縦長画面の場合の地図と情報表示画面の比率を変更しました。
  そのほか，細部の修正・改善を行いました。
• Version 3.8.11 / 2016.09.23
  農研機構の地図タイルについて出典の表記を変更しました。また，地理院タイルの凡例のリンク先URLを変更しました。
  https接続に対応できるようにしました。
  地図上に表示される線・面の色を若干変更しました。
  そのほか，細部の修正・改善を行いました。
• Version 3.8.08 / 2016.06.09
  画面に表示される文字の大きさ，行間等を改善し，また，スマートフォンの縦画面での表示方法も改善しました。
  出典の表記において，農研機構 Finds.jp による地図画像配信サービスについての記述を変更しました。
  そのほか，細部の修正・改善を行いました。
• Version 3.8.05 / 2016.03.17
  上載せ情報のレイヤ別表示に対応しました。
  画面表示に使用するフォントを指定しました。（ヒラギノ角ゴ ProN／メイリオ）
  出典の表記において，国土地理院の地図の利用手続へのリンクが正しくなかったのを修正しました。
  そのほか，細部の修正・改善を行いました。

収録ファイル

ダウンロードしたgomaan.zipファイルを展開すると，以下のファイルが取り出せます。

gomaan1.html

gomaan2.html

gomaan4.html

ウェブサイトにGoogleマップを組み込むためのHTMLが記載されたファイルです。

gomaan.html（タイプＡ）は地図上に吹き出しが現れて，その場所の情報が表示されるタイプです。 一方，gomaan2.html（タイプＢ）やgomaan4.html（タイプＣ）は地図の右側に情報を表示する欄が設置されているタイプです。 いずれかお好みのファイルをお使いください。

gomaan.js

Googleマップを組み込むためのJavaScriptが記載されたファイルです。

tile_nodata.gif

地図画像タイルが取得できなかった場合に代わりに表示される画像タイルです。 灰色の地に“NO DATA”と表示される画像です。

arrow_lc.png

arrow_lo.png

arrow_pc.png

arrow_po.png

gomaan4.html（タイプＣ）において使用するアイコンの画像ファイルです。

gomaan.txt

地図の表示内容を指定するためのデータのファイルです。 動作確認用のサンプル・データが収録されています。
あなたが独自のデータのファイルを用意する際は，サンプル・データを削除するか，サンプル・データを別のファイル名に変更してください。

gomaan.xls

地図の表示内容を指定するためのデータ（gomaan.txt）をMicrosoft Excelで入力・編集するためのテンプレート・ファイルです。 見本としてあらかじめサンプル・データが記入されています。 あなたが独自の地点データを入力・編集される際に参考になさってください。

readme.txt

使用条件を記しています。 ご確認ください。

使用方法

1. APIキーの取得
   1. Google Maps APIを利用したウェブサイトを開設するには，Googleの発行するAPIキーが必要です。まだAPIキーをお持ち出ない場合は，まず Google Maps APIs for Web へアクセスして，APIキーを取得してください。
   2. gomaan1.html（または gomaan2.html, gomaan4.html）ファイルをテキストエディタで開き，「◆ここにAPIキーを記入してください◆」の文字列を削除し，そこへAPIキーを記入してください。
      →「…maps/api/js?key=ABCdefg…xyz" charset…」というようになるはずです。（ABCdefg…xyzの部分がAPIキー）
   3. APIキーの記入が終わったら，ファイルを上書き保存してください。
2. アップロードと動作確認
   1. gomaan1.html（または gomaan2.html, gomaan4.html）ファイル，gomaan.jsファイル，tile_nodata.gifファイル，arrow_**.pngの４つのファイル，gomaan.txtファイル（とりあえずサンプル・データのままで可）をあなたのウェブサイト用のサーバーへアップロードしてください。
   2. ブラウザ（Internet Explorerなど）でサーバー上のgomaan.html（または gomaan2.html, gomaan4.html）ファイルへアクセスしてください。
      あなたのウェブサイトが http://www.abc.jp/def/ の場合， http://www.abc.jp/def/gomaan.html がURL（アドレス）となるはずです。 また，例えば map というフォルダを作ってそのなかにアップロードした場合， http://www.abc.jp/def/map/gomaan.html となるはずです。
   3. ブラウザに日本付近の地図が表示されます。福井県付近にマーカーが表示されており，そのマーカーをクリックすると吹き出しが現れて，「サンプル これは動作確認用のサンプルです。」と表示されれば，ひとまず成功です。
3. 地点データ（gomaan.txt）の作成・編集
   1. Microsoft Excelでgomaan.xlsファイルを開いてください。
      （※ Microsoft Excelがインストールされていないパソコンでは，この作業は行えません。ご了承ください。）
   2. 緯度，経度，地図上のマーカーや図形などをクリックすることで表示させたい文字や画像，リンク，また，ウェブページ上での地図以外の表示内容（表題など）について記述してください。 具体的な記述方法はサンプルgomaan.xlsを参考にしてください。
      緯度・経度の値の取得にあたっては，こちらのページをご利用ください。
   3. 入力が終わると，ひとまずファイルを保存してください。
   4. 次にワークシート全体を選択してコピーしてください。 コピーMicrosoft Excelは終了していただいて結構です。
   5. 「メモ帳」（または，その他のテキストエディタ）を開き，そこにコピーした内容を貼り付けてください。 各列がタブで区切られたテキスト・データとなって貼り付けられるはずです。
   6. 内容を変更せずに，そのままファイルに保存してください。 その際，ファイルの種類は「テキスト文書 (*.txt)」，文字コードは「UTF-8」を必ず指定してください。 ファイル名は「gomaan.txt」としてください。
4. 地点データのアップロード
   1. I と同じ手順で，gomaan.txtファイルをサーバーへアップロードしてください。
   2. ブラウザ（Internet Explorerなど）でサーバー上のgomaan.html（または gomaan2.html, gomaan4.html）ファイルへアクセスすると，マーカー等が表示されるはずです。
5. 地点データの更新

   地点データを修正・更新するには，II〜III の手順を繰り返してください。

6. 補足

   gomaan1.html（および gomaan2.html, gomaan4.html）ファイルは名前を変更することができます。 index.htmlなどに適宜変更していただいて結構です。