GoogleMapの軌跡地図のマーカーが消えた件への対処

GPSロガーと写真とフリーソフト「轍」を使ってブログにGoogleMapを利用した軌跡地図を載せていましたが
最近気づいたら写真マーカー部分が全記事に渡って消えてました。
同じ方式で軌跡地図をブログにアップしてる人がいるかわかりませんが一応対処方をメモしておきます。

近頃はブログテンプレートをいじり回していたのでなにか失敗したか・・・とか思ってたけど
「轍」作者さんのページを見てみたら既に対応されていました。
マーカー用の画像がGoogle Labsの終了に伴って消えたのが原因だそうです
現在はもう対応済みのソフトが準備されてるとのこと。


自分は地図用の「~.js」ファイルのファンクション「setIcon」の部分のマーカー画像のURLアドレスを
新しい画像のURLに変えて修正してアップロードしたらなんとか表示されました。
(新しいアドレスは新バージョンの轍を使ってみてくださいな)

※FC2のファイルアップロードで上書き保存しようとするとなかなか置き換わらないですが
 ①管理画面の左下にある「ツール」で上書きするファイルをアップロード
 ②「上書きしますか?」の確認は「はい」を選択
 ③アップロード終わったら「F5ボタン」を押して画面を更新 
 上記の手順の③が重要っぽいです、この方法だと即時反映しました


修正してて気づいたのですが「続きを読む」の中に地図を隠してたらどうにもページエラーが発生してるようです。
表に出したらエラーが出なくなったので全部の地図記事を表にだしました。(原因はよくわかんない)
表示が多少遅くなるかもだけどページエラーでるよりは良いのかな~
地図とFC2ブログとの相性なのかな?


スポンサーサイト

GPSロガーのデータをグーグルマップで表示させる件の追記

ちょっと追記です

使用している編集ソフト「轍」のバージョンアップをして地図を編集しましたら
ブログ上の表示が変なとこ映したり、南極表示したり、表示枠の片隅にしかでなかったりと
ちょっと変な減少が起きてしまって色々試してたらどうやらブラウザを変えるとうまく表示されました。

自分はIE8を使っているのですが、記事の下書き時の表示はちゃんと表示されてるけど、保存して実際見てみると変・・
Firefoxで問題なく表示は確認、IE9は環境が無いのでわかりません。
IE9の人は見れているのかなぁ・・・だれか教えてください・・

轍のバージョンアップですが、主なところではグーグルマップAPIキーの取得が不要になってました
「川口樅木林道」はその「轍」を使用しましたが問題ない様子です。(自分のIE8では表示されてませんが)
過去記事にちょっと注釈を入れて回っておきます。

GPSロガーから軌跡データをブログの記事に表示する方法

くるとんさんのGPSロガー 軌跡の部屋を見て「林道を地図に表示させてみよう」と
思い立ってGPSロガーを購入したのはいいのですが
どのように地図に表示させるかで思いっきり引っかかってしまいました。
軌跡をGoogle地図のマイマップに表示させるのはうまくいったのですが
写真データとの連動とかブログに表示させようとするとうまくいかず
次にHPを別に作って表示させようとしたのですがHP作成がメンドクサイのと表示がうまくいかず断念
(三日ほどパソコンと格闘)

色々調べているうちに わたさんの「砂と蒼空」GoogleMapにGPSの軌跡を表示させよう!
の記事に行き当たりようやく理解できてなんとか表示させることに成功しました。
ソフトのバージョン違いなどによる処理の違いはあるようですが大部分の情報を参考にさせていただきました
本当にありがとうございます。



以下は自分の場合の作業手順です、多少言葉足らずかもしれませんし本当に正しいかどうかわかりませんが
とりあえずは表示できたのでなにかの参考になればと
厳密にはやってもやらなくても良い部分の手順とかも含まれますが、それはご容赦のほどを


*** 自分の場合の環境 *****************************************************************************

ブログ: FC2ブログ
(拡張子html,js,cssのファイルのアップロードができるなら他のブログでも可能かもしれません)

GPSロガー:
TripMate850(トランシステム社製)

軌跡編集用ソフト1:
GpsPhotoTagger V1.2.3 h14 (TripMate850の付属品)
TripMate850からのログデータ取り込み、トラックデータ出力、非公開個人用データ蓄積用

軌跡編集用ソフト2:
轍 v3.43 (フリーソフト)
ログポイント間引き、画像関連付け、GoogleMapsHTML生成用

*** 自分の場合の環境 *****************************************************************************

*** Start 処理前準備 (最初に1回)***************************************************************
①ブログ内でのファイル保存先アドレス調査
ブログにアップロードされた写真等のプロパティにて保存先のパスを確認
例:http://blog-imgs-38.fc2.com/r/er/k/cetus826/バイク1.jpg
   ならば「http://blog-imgs-38.fc2.com/r/er/k/cetus826/」までのアドレスを控えておく

 ※ブログ上のアップロード先が自動で他のトコになってる場合もありえますので
  うまく表示できない場合はファイルのアップ先のアドレスを確認してみると良いかも


下記の処理は「轍」のVersion 3.50よりGoogle Maps API V3 に対応したため不要になりました。
②GoogleMapsAPIキーを取得
 グーグルマップをHPなどに利用する場合はこのAPIキーが必要
 (GoogleMapsAPIのver3だと不要らしいですが「轍」はver2対応ですので)
 「轍」はこのキーを含めてHTMLを生成してくれるソフトです
 「轍」のhelp>APIキー取得でキー取得用サイトに飛ぶので①で控えておいたアドレスでAPIキーを取得する
 
③「轍」にAPIキーを登録
 「轍」のオプション>APIキー登録 から取得したAPIキーを登録しておく

*** End 処理前準備 (最初に1回)******************************************************************


ここから毎回処理

*** Start GPSフォトタガーでの処理 ****************************************************************
※ブログへの出力処理の準備と個人的なバックアップの為の処理
 ブログ出力のために重要なのは⑥のトラックデータ(拡張子gpx)を出力すること

 ①写真ファイルをjpegにして保存する(写真と連動させたい場合)

 ②GPSロガー(Tripmate850)からログファイルを読み込む
 (切り取ってフォルダに格納して読み込んでも可)

 ③GPSフォトタガーを起動しログファイルを読み取る

 ④写真も読み込ませてGPS情報を写真へ書き込む
 (google表示には特に必要無いかも、撮影時間で関連付けをしてるみたいなので)

 ⑤ファイル名、名称などを整理してプロジェクトを保存しておく

 ⑥トラックデータの保存にて「轍」取り込み用ファイルを作成
  GPSフォトタガーでは(*.gpx)の形式で出力される、結果的に轍で読み込み可能ならば形式はなんでも良い

*** End GPSフォトタガーでの処理 ****************************************************************


*** Start「轍」での処理 ****************************************************************
※ブログへ軌跡データをグーグルマップにセットして表示させる為の処理
①GPSフォトタガーで出力したトラックデータをインポートする
 エクスプローラーからドラッグ&ドロップでも可能

②読み込んだトラックデータのログポイント間引きの為の設定を行う
 (1000~3000くらい?調整して最適な数字で自由に)

③GPSフォトタガーにて画像を関連付けているとウェイポイントも点いた状態になっているが
 「轍」にて関連付けを改めて行うのでウェイポイントは削除する

④画像を読み込ませて「ウェイポイントの自動作成」ボタンを押しウェイポイントを作成する

⑤出力設定画面にてAPIキーのセット、マップ様式のカスタム等を行う
 最初は単純な地図の設定(画像なしとか、その他資料出力なしとか)にして
 テストしてみる事をお勧めします

⑥この時点までに保存してない場合は保存しておいたほうがやり直しとかしやすい

⑦エクスポートにてGoogleMapsHTMLを生成
 GoogleMapsHTMLを生成すると下記のファイルとフォルダが作成される
  (出力ファイル名を「test_A.html」で出力した場合)

  ファイル:TEST_A.html (表示用htmlファイル本体)
  フォルダ:TEST_A_files
    ファイル:center_pointer.png (ポインタ用?の画像ファイル)
    ファイル:googlemaps.js (軌跡データ、画像保存先パス等の重要な情報が入ったファイル)
    ファイル:style.css (表示用のスタイルシート)
*** End「轍」での処理 ****************************************************************


*** Startブログ上で表示させる為の手動編集 *********************************************************
 各ファイルの手動編集
 この段階だと「TEST_A.html」を直接IEで開けばマップが普通に見えると思いますが
 試しに「TEST_A_files」フォルダ内に「TEST_A.html」をコピーしてそれを開くと
 真っ白になってるか表示エラーが出ると思います。
 これはファイル内に記述してあるパスが合ってない為におこることです。
 ブログ内の保存先フォルダは同一階層になりますので同一フォルダ内に全ファイルがおいてある状態で
 正しく表示できるように修正しなければいけません
 修正の内容はファイル名の変更とパスの変更です

①style.css:
  スタイルシートは特に今後も共通で使えるものと思われますが名称が一般的すぎるので
  地図以外でスタイルシートを利用しようとして上書きしないように名前を変えておきます
  「style.css」>「googlemapsstyle.css」
  
   htmlファイルのアップロード先が自動で今まで変わってしまう場合があると思うので
   過去にアップした地図を保全する為にも地図を作る毎に名前を変えてアップしておいたほうが良い

②googlemaps.js:
  このファイルは地図毎にアップロードが必要になるファイルなので上書きしてしまわないように
  名前を変えておきます
   「googlemaps.js」> 「TEST_A_googlemaps.js」
   ※あんまり長いファイル名だと自動で短縮されたりするかも?
  
  あとこのファイル内にはパスを含む記述があるのでそれをメモ帳とかで表示して消してしまいます
  「TEST_A_files/」とかで検索して削除しちゃいます
  ブログ内では同一階層にファイルが全部置かれるのでパス無しな状態にする為です

③test_A.html:
  ファイルの中身を名前を変えたstyle.css、googlemaps.jsの変更後のファイル名に書き換えます
   あとパスも同一階層の対応の為「TEST_A_files/」とかで検索して削除しちゃいます(パス無し状態にする)

各ファイルの編集後では「TEST_A_files」フォルダ内の「TEST_A.html」を開くと表示できる状態になってると思います
写真を含む場合は写真のファイルも「TEST_A_files」フォルダ内においておかないと表示されないと思います

*** Endブログ上で表示させる為の手動編集 **********************************************************

*** Startブログへのアップロード処理(FC2ブログ) **************************************************

①写真をアップロードするのと同じようにhtmlファイル,jsファイル,cssファイル,写真ファイルをアップロードします
 (写真ファイルの名前はそのままの名前でアップロードしないといけません)
※FC2ブログはどの拡張子もアップロード可能になってますがブログの種類によっては出来ないかもしれません

②アップロードをしたら表示させる記事をつくります

※インラインフレームはSEOで悪い影響を与え安いそうなので現在はリンクにして
 別ウィンドウで表示するようにしてます
 どうしても記事上で表示させい場合は下記の方法にて


アップロードしたhtmlファイルはインラインフレームというhtmlタグを利用して表示させます
保存先パス:「http://blog-imgs-38.fc2.com/r/er/k/cetus826/」、htmlファイル名:TEST_A.htmlの場合
下記のをコピーして記事本文に貼り付けると表示されます

「<iframe 」「</iframe >」の部分は半角小文字に変更してください
↓ここから
<iframe src="http://blog-imgs-38.fc2.com/r/er/k/cetus826/TEST_A.html" frameborder="0" style="width: 700px; height: 650px; border: 1px solid gray">
</iframe >
↑ここまで

内容は大まかに「http://blog-imgs-38.fc2.com/r/er/k/cetus826/TEST_A.html」を枠線無し、
幅700px高さ650pxの枠に表示する という意味です
枠のサイズは轍で作成する地図にあわせて調整とか細かい設定は調べて書き換えると良い表現をできるかもですので利用されるかたは自由に調べて書き換えると良いかもです

これで表示ブログの記事に表示されてると思います。



*** End ブログへのアップロード処理(FC2ブログ) ***************************************************



その他注意事項(というか今後の調査課題)
①「轍」で表示されたGoogleMapとブログで表示されたGoogleMapと微妙に違う
  (制御パネルと大きさとか)

②地図込みの記事を作ってすぐの状態だと地図の初期表示がなんかうまくいってない
  (北半球全部見える位置になってたり、隅っこしか見えなかったり)
 これは別のページとかに飛んで再表示させたりしばらく待ってると解消された、原因は今のところ不明

③頻繁に地図を作りたい人は一括置換とか書き換えの処理を作ったほうがいいかも

④この方法自体が正しいのか不安・・・(´・ω・`)


不足、間違い等があればご指摘ください

 
追記:
 ブログの下書き画面だと表示されるのに保存して公開したブログ上だと変な表示になる現象が 自分はしばしばおきてました。
 ブラウザをFirefoxに変えたら解消したのでIE8との相性が悪かったのかもしれません
 IE9とかで同一現象が起きるかどうかは不明です。


追記2:
    「ブログの追記」(「続きを読む」の中)に地図を載せるとページエラーになったり
    地図は変な表示になってしまってるような気がします。
    同じ現象が起きたら置き場所を変えてみたら解消するかも?




サイト内検索
記事カテゴリ
リンク
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
全記事表示リンク
PR
アクセスカウンター
プロフィール

カイトス

Author:カイトス
愛車:せろー250 (Fi)
どうぞ宜しく


●にほんぶろぐ村
にほんブログ村 バイクブログ オフロードへ

●ついったー(ページ更新通知)
 Twitterプロフィール頁へ

◎Information
・当サイトはリンクフリーです
・当サイト中の文章や写真を無断転載する事は禁止です
アドレスQRコード
QR
愛用品(もしくはその現行品)
AP 10W LED丸型ワークライト


HORNET ADV


ツアークロス3


山本光学
YG-5200 PET-AF


JRPグローブ SVN


JRPグローブ SPM


JRPグローブ GBW


ガエルネ タフギア
商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。お買い物される際には、必ず商品ページの情報を確認いただきますようお願いいたします。また商品ページが削除された場合は、「最新の情報が表示できませんでした」と表示されます。

ガエルネ フーガ


ガエルネ FASTBACK


ガエルネ ロングソックス


KOMINE SK-462
ハードニープロテクター


コミネ(KOMINE)
SK-690 CEフレックスニーガード


ケブコブーメランベルト


フォースフィールド
バックプロテクターProL2K/EVO


フォースフィールド
エリートチェストプロテクター


ラフ&ロード RR10061
ボディープロテクターベスト


パールイズミ
コンフォート パンツ


クシタニ Eコーデュラパンツ


トロイリー Revパンツ


コミネ ウインターオーバーパンツII


NGKプレミアムRXプラグ


NGKプラグキャップ


ツーリングシート


プロアーマーハンドガードベンド


ZETA ハンドガードマウント
サイドタイプ


ZETA XC-PROプロテクター 黒


EDスキッドプレート


POWER BOX(パワーボックス)
エキゾーストパイプ SP忠男


DELTA バレル4S


DELTA トルクヘッドパイプ


DNAモトフィルター


STEALTH TAPERバー
アブソーブ TXC2


STEALTH
テーパーバーマウント


プロテーパー
PILLOW TOP グリップ


PROGRIP フランジフォーム


ZETA ピボットレバー
4フィンガー


ZETA ハイスロットル


DRC ムシ回し付
エアバルブキャップ


DRC エアバルブマッドガード


ラジカルミラー


クロス2/オプティクス


ROUGH&ROAD
HOTハンドウォーマー


SHORAI リフェバッテリー


PIAA ハイパワーバルブ MB1


M&Hマツシマ L8184 R&W
ストップ/テール用LED球


DAYTONAバイク専用電源
USB1ポート
商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。お買い物される際には、必ず商品ページの情報を確認いただきますようお願いいたします。また商品ページが削除された場合は、「最新の情報が表示できませんでした」と表示されます。

AQUAPROVA HG REV METER


ABUS Provogue 305


GIVI E300


超小型温度計T-14


PRIMUS P-153


騎士(のこぎり・鋸)


トピーク携帯ポンプ


TOPEAK ミニモーフ


エーモン エアゲージ(ペンシル)


究極・エアゲージ


パナレーサー
デュアルヘッド デジタルゲージ


TOPEAK(トピーク)
スーパースチール タイヤレバー


TOP工業 ハイパーレンチ


バーコ(BAHCO) 8071C


KO-KEN Z-EAL


KNIPEX プライヤーレンチ


SIGNET フレックスメガネギアレンチ


KTC メガネレンチ


IRWIN VISE-GRIP


STRAIGHT トルクレンチ


STRAIGHT バイクスタンド


GARMIN eTrex30 (英語版)


Transystem TripMate852


ドイター トランスアルパイン25


ENDURISTAN
サンドストーム3Sタンクバッグ


ENDURISTAN
トルネード2ドラムバッグ


ENDURISTAN
XSベースパック


YSS PDバルブ(29mm)


TGR
パフォーマンスリアショック