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から見た修正で、無視して『閉じる』を選択してください。