Polar RC3 GPSのGPSデータ(GPX)をGoogle Mapsに取り込んで自分のブログに貼り付ける方法
Polar RC3 GPSのデータをpolarpersonaltrainer.comに取り込むと、GPSデータを地図としてみることができます。これをブログに表示したいな〜とは誰しも思うことでしょう。以下のようにすると、比較的簡単にできます。比較的とただし書きがついているのは、完全自動とか一発変換ではないからです。でもあまり迷うところはありませんので、是非試してみてください。
GPSデータ(GPX)のダウンロードとKMLへの変換
1 polarpersonaltrainer.comの[概要]ページの一番下の[GPXをエクスポート]を選び、ファイルをダウンロードする。このフォーマットはGPXです。
2 Google MapsはGPXは読み込んでくれません。読み込めるのはKMLかCSVです。KMLの方が良さそうですので、ここではKMLに変換します。GPSBabelというフリーウェアを使います。あらかじめダウンロードし、インストールしておいてください。GPSBabelを起動すると以下のような画面になります。
この画面は以下のように操作しましょう。
1 → プルダウンメニューから[GPX XML]フォーマットを選ぶ。たくさんあるので注意。
2 → 先ほどダウンロードしたGPXファイルを指定する。
3 → プルダウンメニューから[Google Earth (Keyhole) Markup Language]フォーマットを選ぶ。こちらもたくさんあるので注意。
4 → GPX→KML変換後のファイル名を指定する。
5 → [OK]で変換開始!
KMLのGoogle Mapsへの取り込み
3 さて、変換が終わったらGoogle Mapsを開き、ログオンします。そしてマイマップから[新規作成]を選ぶと以下の画面になります。ここで吹き出しが付いている[インポート]を選びます。
4 ファイル選択画面がでるので、先ほど作成したKMLファイルを指定します。
5 そうすると数秒〜10秒ほどで以下の警告画面がでるはずです。データが多すぎるということなのですが、ここはこのまま[インポートを続行]です。後で不完全なデータを消せばいいので。
6 インポートが完了すると、画面左側に取り込まれたデータが表示されます。Tracks, GPS device, Pointsの三つがありますが、必要なのはTracksだけ。あとの2つは削除してください。削除の仕方ですが、例えばPointsの場合は、[Points]をクリックすると右側に▼マークが出ますので、それをクリックして、[削除]を選んでください。
地図はこれでできました。思ったより簡単だったのではないでしょうか? 次にこの地図をブログに貼り付けますが、その前にちょっとだけ設定の変更が必要です。
地図の共有設定の変更
7 Google Mapsは、デフォルトでは地図が非公開の設定です。これを公開の設定に変える必要があります。右上に[共有]ボタンがあるのでこれを押しましょう。
8 そうすると共有設定画面が表示されます。この真ん中右側に[変更...]のリンクがあります。これをクリックすると...
9 公開レベルの設定画面がでます。普通のブログなら一番上の[ウェブ上で一般公開]を選びます。そうじゃないというかたは適切なものを選んでください。[保存]を選んで設定は終わりです。
埋め込み用HTMLコードのコピーとブログへの貼り付け
10 さて、いよいよ最後のステップです。メニューから[自分のサイトに埋め込む]を選択すると...
11 埋め込み用のHTMLコードが表示されます。このHTMLコードを自分のブログに貼り付ければ完了です。
ブログにより貼り付け方は違いますが、HTMLコードとして貼り付けることが必要ですのでご注意ください。多分、通常の編集画面にそのまま貼ると、HTMLコードがそのままテキストとして貼り付けられるので、埋め込みとして機能しなくなります。
きちんと埋め込みされると、以下のように表示されます。やった!
以下は失敗例。編集画面でこう見えているとただの文字列なので、おそらく地図は出ないはずです。
<iframe height="480" src="https://mapsengine.google.com/map/embed?mid=zgwj4aPXs0O4.ki6qrY8cNdo8" width="640"></iframe>
ソースコードの編集方法はブログにより違うので調べてみてください。blogger.comであれば、編集画面左上の
[ 作成 | HTML ] ボタン
で切り替えます。
おまけ1 地図のサイズを変えてみよう
デフォルトでは地図の横幅は640です。自分のブログにはサイズが大きすぎるなー、という方は、先ほどのHTMLコードの数字をちょこちょこっと変えるだけで調整できます。
width="640" で横幅(ピクセル)を指定しています。この640を320とかにするとぐっと小さくなります。縦横比が変だよ、という方は height="480"の数字も合わせて変えてみましょう。
width=""は%の指定もできるので、例えばwidth="75%"と書けばこうなります。自分のブログの表示エリアにぴったり表示したいなら、width="100%"ですかね。
おまけ2 地図を画像として表示させてみよう
地図を埋め込むと、気になる人には気になる問題があります。例えば
2015/12/14 追記：地図を画像として表示させるのに必要なコードを自動生成するWebサービスを公開しました。GPSログをWebにアップするだけで、ブログに貼り付けるコードを生成します。【関連記事はこちら】
ではでは。
GPSデータ(GPX)のダウンロードとKMLへの変換
1 polarpersonaltrainer.comの[概要]ページの一番下の[GPXをエクスポート]を選び、ファイルをダウンロードする。このフォーマットはGPXです。
2 Google MapsはGPXは読み込んでくれません。読み込めるのはKMLかCSVです。KMLの方が良さそうですので、ここではKMLに変換します。GPSBabelというフリーウェアを使います。あらかじめダウンロードし、インストールしておいてください。GPSBabelを起動すると以下のような画面になります。
1 → プルダウンメニューから[GPX XML]フォーマットを選ぶ。たくさんあるので注意。
2 → 先ほどダウンロードしたGPXファイルを指定する。
3 → プルダウンメニューから[Google Earth (Keyhole) Markup Language]フォーマットを選ぶ。こちらもたくさんあるので注意。
4 → GPX→KML変換後のファイル名を指定する。
5 → [OK]で変換開始!
KMLのGoogle Mapsへの取り込み
3 さて、変換が終わったらGoogle Mapsを開き、ログオンします。そしてマイマップから[新規作成]を選ぶと以下の画面になります。ここで吹き出しが付いている[インポート]を選びます。
4 ファイル選択画面がでるので、先ほど作成したKMLファイルを指定します。
5 そうすると数秒〜10秒ほどで以下の警告画面がでるはずです。データが多すぎるということなのですが、ここはこのまま[インポートを続行]です。後で不完全なデータを消せばいいので。
6 インポートが完了すると、画面左側に取り込まれたデータが表示されます。Tracks, GPS device, Pointsの三つがありますが、必要なのはTracksだけ。あとの2つは削除してください。削除の仕方ですが、例えばPointsの場合は、[Points]をクリックすると右側に▼マークが出ますので、それをクリックして、[削除]を選んでください。
地図はこれでできました。思ったより簡単だったのではないでしょうか? 次にこの地図をブログに貼り付けますが、その前にちょっとだけ設定の変更が必要です。
地図の共有設定の変更
7 Google Mapsは、デフォルトでは地図が非公開の設定です。これを公開の設定に変える必要があります。右上に[共有]ボタンがあるのでこれを押しましょう。
8 そうすると共有設定画面が表示されます。この真ん中右側に[変更...]のリンクがあります。これをクリックすると...
9 公開レベルの設定画面がでます。普通のブログなら一番上の[ウェブ上で一般公開]を選びます。そうじゃないというかたは適切なものを選んでください。[保存]を選んで設定は終わりです。
埋め込み用HTMLコードのコピーとブログへの貼り付け
11 埋め込み用のHTMLコードが表示されます。このHTMLコードを自分のブログに貼り付ければ完了です。
ブログにより貼り付け方は違いますが、HTMLコードとして貼り付けることが必要ですのでご注意ください。多分、通常の編集画面にそのまま貼ると、HTMLコードがそのままテキストとして貼り付けられるので、埋め込みとして機能しなくなります。
きちんと埋め込みされると、以下のように表示されます。やった!
以下は失敗例。編集画面でこう見えているとただの文字列なので、おそらく地図は出ないはずです。
<iframe height="480" src="https://mapsengine.google.com/map/embed?mid=zgwj4aPXs0O4.ki6qrY8cNdo8" width="640"></iframe>
ソースコードの編集方法はブログにより違うので調べてみてください。blogger.comであれば、編集画面左上の
[ 作成 | HTML ] ボタン
で切り替えます。
おまけ1 地図のサイズを変えてみよう
デフォルトでは地図の横幅は640です。自分のブログにはサイズが大きすぎるなー、という方は、先ほどのHTMLコードの数字をちょこちょこっと変えるだけで調整できます。
width="640" で横幅(ピクセル)を指定しています。この640を320とかにするとぐっと小さくなります。縦横比が変だよ、という方は height="480"の数字も合わせて変えてみましょう。
width=""は%の指定もできるので、例えばwidth="75%"と書けばこうなります。自分のブログの表示エリアにぴったり表示したいなら、width="100%"ですかね。
おまけ2 地図を画像として表示させてみよう
地図を埋め込むと、気になる人には気になる問題があります。例えば
- Google Mapsからのデータ読み込みに時間がかかるので、地図一枚だけの記事だと、なかなか地図が表示されずにいらいらする。特にモバイルの場合。
- RSSリーダーなどに地図が表示されない場合がある。画像として表示されていればされることが多い。でも、スクリーンキャプチャして貼り付けるのはGoogle Mapsの利用条項違反。
2015/12/14 追記：地図を画像として表示させるのに必要なコードを自動生成するWebサービスを公開しました。GPSログをWebにアップするだけで、ブログに貼り付けるコードを生成します。【関連記事はこちら】
ではでは。
投稿
0 件のコメント :
コメントを投稿