DONのヨット暮らし

Mais ou sont les neiges d'antan?

自艇の計画航路と航跡をGoogle mapに表示する

イメージ 1

2010.8.27(土)
上記の写真は五島列島奈良尾港から奈留港へのヨットでの計画ルートと航海航跡をGoogle map上に表示したものです。

Donのヨット泊地情報と航路情報では、本州一周、関東→沖縄久米島、沖縄→九州西岸→瀬戸内海→熱海、それぞれの泊地と航路につきGoogle mapで見ることができます。
http://www.donsaigou.com/hakutikouro.html

自艇の計画航路と航跡をGoogle map上に表示するにはどうしたら良いか。
その方法にご興味の有る方にご紹介します。
結構面倒な作業を伴い、多量のデータを扱う際は腕力がいります。

Google map
Google Map上のwaypoint、ルート、トラックをホームページに公開する。
ステップ1: GPS機器からトラック情報等を記録する。
       私の場合は航海後、ガーミンのハンディGPSのデータを船内のpcに地図ソ
      フト、カシミールを使って記録しています。
ステップ2: 記録したwaypoint、ルート、トラック情報をGPXファイルにする。
       私の場合はカシミールの「GPSデータ編集」でwaypoint、ルート、トラックを、
       それぞれのGPXファイルとして出力する。
ステップ3: GPXファイルをHTMLファイルに変換する。
       waypoint、ルート、トラックのGPXファイルをHTMLファイルに変換でき
       るソフトは現在、轍Wadachiしかない。
       waypoint、ルート、トラックそれぞれのGPXファイルを轍にインポートする。
       http://www.cyclekikou.net/
       轍Wadachiを開いてGPXファイルを「インポート」する。
       インポートの前に、「出力設定」画面→「表示」→「マーカーリストを表示」にチェック。
       「出力設定」画面→「マーカー」→「ルートポイントを表示」にチェック。
       各種設定をしHTMLファイルとして「エクスポート」する。
ステップ4: サーバーにHTMLファイルをアップし、インターネット上に公開する。
       私の場合はホームページビルダーで白紙ペ時を作りアップしている。
       航路情報等の中の情報としてwaypoint、ルート、トラックのグーグルマップを
       アップするには熱海→下田「google map熱海→下田」等の文字から白紙ページに
       作成したgoogle map上のwaypoint、ルート、トラックにリンク設定する。

詳細作業ああああああああああああああ
(以前はGoogle Mapsを公開サーバー上で利用するにあたってはGoogle Maps APIキーを取得する必要がありました。現在は不要となりました)
       1)サーバーにHTMLファイルをアップする
         私のホームページビルダーに寄るアップの詳細を記します。
        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から見た修正で、無視して『閉じる』を選択してください。