DONのヨット暮らし

Mais ou sont les neiges d'antan?

自艇の計画航路や航跡をGoogle Mapで表示する方法

イメージ 1

2012.8.5(日)
Google Map上に自艇の計画航路や航跡を表示する方法をご紹介します。
2018.1.5以下に修正

Google Map上に自艇のwaypoint、ルート、トラックを表示してホームページに公開する。
自艇の計画航路と航跡をGoogle map上に表示するにはどうしたら良いか。
その方法にご興味の有る方にご紹介します。

Google map
Google Map上のwaypoint、ルート、トラックをホームページに公開する。
ステップ1: GPS機器からトラック,ルート、waypointの情報を記録する。
       私の場合は航海後、ガーミンのハンディGPSのデータを船内のpcに地図ソ
      フト、カシミールを使って記録しています。
ステップ2: 記録したwaypoint、ルート、トラック情報をGPXファイルにする。
       私の場合はカシミールの「GPSデータ編集」でGPXファイルとして出力する。
ステップ3: GPXファイルをHTMLファイルに変換する。
       waypoint、ルート、トラックのGPXファイルをHTMLファイルに変換でき
       るソフトは現在、轍Wadachiしかない。
       http://www.cyclekikou.net/
       轍Wadachiを開いてGPXファイルを「インポート」する。
       各種設定をしHTMLファイルとして「エクスポート」する。
ステップ4: サーバーにHTMLファイルをアップし、インターネット上に公開する。
       私の場合はホームページビルダーでサーバーにアップしている。

詳細作業
4)サーバーにHTMLファイルをアップする
   私のホームページビルダーに寄るアップの詳細を記します。
   4.1)作成したhtmlファイルをホームページビルダーのファイル集にコピーする。
   4.2)ホームページビルダーの「ツール」を開く
   4.3)「FTPツールの起動」を選択。FTPツールをネットに接続
   4.4)左側のファイル集の中の「該当HTMLファイル」を選択し、右側に移動し、サーバーにアップする。


(以前はGoogle Mapsを公開サーバー上で利用するにあたっては
 Google Maps APIキーを取得する必要がありました。現在は不要となりました)
以下は読む必要はありません。
参考、過去の方法:
以前はこんな、面倒な事をしてました。
         私のホームページビルダーに寄るアップの詳細を記します。
        1.1ホームページビルダーの設定変更
          ホームページビルダーはデフォルトでHTML4.01使用となっています。
          (轍のHTMLファイルはXHTMLファイルで作成されているのでホームページビルダ
           ーのデフォルトで取込むとエラーが出てアップできない)

       1.2ホームページビルダーが自動修正しない設定:
          ツール→オプション→一般→「HTMLソースを自動整形する」のチェックを外す
          ツール→オプション→一般→「自動修正する」のチェックを外す
          ツール→オプション→一般→エラー時の動作で「全てのエラーで修正ダイアログを開く」を選択する
          ツール→オプション→ファイル→「DOCTYPEを出力する」のチェックを外す。
          ツール→オプション→ファイル→「HTMLソースにGENERATORを組み込む」のチェックを外す。
          ツール→オプション→ファイル→「文字エンコードをMETAタグで指定する」のチェックを外す。
          ツール→オプション→ファイル→「基準スタイルシートをMETAタグで指定する」のチェックを外す。
          以上でホームページビルダーのデフォルト設定を一部解除できる。
          以上、ホームページビルダーのデフォルトを変更する7箇所の設定をしないで、保存すると
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          とHTML 4.01の設定が最初の行に自動で出てしまう。
      なお、Google Mapを入れる場合以外は5箇所の変更を元に戻す。

        1.3 ホームページビルダーを起動し、「サイトを開く」先ず該当するサイトを開く
        1.4 →スタート→ページ作成→白ページ作成
        1.5 最初に「ページ編集」タブが自動で開かれる。タブを移動し「HTMLソース」タブを選択。
         2.6 自動設定が完全には解除されず、htmlが自動挿入されるので削除する。
        「HTMLソース」タブの下に自動で現れるHTML
          <HTML>
         <HEAD>
         <TITLE></TITLE>
         </HEAD>
         <BODY></BODY>
         </HTML>
           を削除する。
       以上の設定でホームページビルダーに入力できます。
       1.7 ファイルの挿入。
         ファイルの挿入→その他のファイル→マイドキュメント
         →轍で作成したGoogle Maps HTMLファイルを選択して
          『開く』→『ファイルの挿入』選択画面が表示される
           一番下の行「HTMLファイルの挿入(ヘッダー/ページ内部品)」を選択→OK
       1.8「HTMLソース」タブにHTMLが表示される
      1.9 「ページ編集」タブに移動→エラー表示がでる→無視して『閉じる』を選択
       (デフォルトhtml4.0から見たエラーなので無視して良い)
1.10 ページ設定→簡単ページ設定→既に轍から記入済みでページの名前が表示される。
         (記入されて無い場合は適当な名前をつける)→次へ→完了
      1.11 ページの保存→名前を付けて保存

       #ここで不思議なことが起こる。
     2.7、2.8で表示されるHTMLは以下だが
<LINK rel="stylesheet" type="text/css" href="file:///C:/Documents and Settings/西郷五十生/
My Documents/グーグル/09/グーグルマップ/gmezaki_files/style.css">
<SCRIPT type="text/javascript"
src="http://www.google.com/jsapi?key=ABQIAAAAcAB70LmIRvwS9yshT4O43hQyojsLQBG2PYYEouck5uOdJBtXExT0ID1qQlIptFSOMFwzJAtfhAKMUQ"></SCRIPT>
<SCRIPT type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcAB70LmIRvwS9yshT4O43hQyojsLQBG2PYYEouck5uOdJBtXExT0ID1qQlIptFSOMFwzJAtfhAKMUQ&sensor=false"></SCRIPT>
<SCRIPT type="text/javascript" src="file:///C:/Documents and Settings/西郷五十生/My
Documents/グーグル/09/グーグルマップ/gmezaki_files/googlemaps.js"></SCRIPT>
<script type="text/javascript">

ページを保存すると不思議なことに
<LINK rel="stylesheet" type="text/css" href="style105.css">
と変わる。
ここで「プレビュー」タブを選択すると地図は表示されるが、WAYPOINT(マーカー)名と
   ペ―ジタイトルが文字化けしてしまう。

1.12 文字化けの解消。
 「HTMLソース」タブを選択し、HTMLスクリプトのどこかで「リーターン」を押し、BACK 
  で元に戻す。
例えば
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
   上記行の</meta>の右でリターンしバックでもどす。
   今度は上書き保存する。
   エラー表示が再度出るが無視して閉じる。
   これで『プレビュー』タブで確認すると、文字化けは解消される
   #何故か何もしないで上書き保存しても文字化けは解消されない

1.13 『プレビュー』タブを選択し、Google Mapが表示されるか確認する。
1.14  ページ公開→ページ転送
  「ページの公開」を行い、サーバー上にアップする。これでインターネット上で見る
   ことができる。
  
参考:
無視して良いエラー表示:
<htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:v="urn:schemas-microsoft-com:vml">  
 属性(xmlns:v)が未定義です
</meta> 開始タグがみつかりません。終了タグ</meta>は不要です
と二つの修正が出ますが、ホームページビルダーのデフォルトHTML4.01から見た修正で、無視して『閉じる』を選択してください。

以前この内容に対し、疾風さんから
「上記のステップ4のサーバーへのアップロード作業はホームページビルダーのFTPツールを使うと簡単にでHTMLファイルをそのままアップロードできます。 [ツール]-[FTPツールの起動]」とのコメントをいただきました。参考までに。

2013.2.6追記
杉原さんから以下のメールを貰いました。
1)GoogleMapを開きます。
https://maps.google.co.jp

2)「マイプレイス」をクリックして、「地図を作成」をクリックします。
このときGoogleAccountでのログインを要求されます。

3)タイトルを入れ、地図の操作で適当な範囲にズームして、目印を落とします。
このとき目印のタイトルに、マリーナ名などを入れます。

4)必要な目印を落としたら、完了をクリックします。

5)鎖マークをクリックして、さらに短縮URLをクリックします。
すると、
http://goo.gl/maps/oTVym
のような、短いURLがでてきます。
これで、作った地図を共用できます。このURLをメールで送ったり、ホームページに埋め込めば、先程の地図が
ポップアップされます。

6)KMLの取得
この地図に評価を付ける �コメントを投稿 �KML
という行がありますが、それのKMLをクリックすると今作ったMAPのKMLがダウンロードされます。

7)エディターでKMLの修正
目印の正確な位置を保証するためには、正確な緯度経度をGoogelEarthなどで求め、度数表示したものを用意し、
GoogleMapの作成した緯度経度をそれで置き換えたほうがいいと思います。

8)KMLの読み込み
再度「マイプレイス」をクリック、「地図を作成」をクリックして、共同編集の隣にあるインポートをクリックすると、
そうして出来たKMLをアップロードすることができます。

9)そして正確なMAPを表示して、4)5)を繰り返せばOKです。

最初からGoogleEar