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