KML形式のGPSログをGoogleEarthにプロットして自分のウェブ・ページ載せたい

447 views
Skip to first unread message

chobe

unread,
Mar 8, 2011, 8:24:55 AM3/8/11
to Google-Maps-API-Japan
Google-Maps-API‐Japanグループに今日参加した新米です。
最近CASIO EX-H20Gというデジカメを購入して旅行をしました。

このデジカメで生成したGPS軌跡KMLログ・ファイルをGoogleEarthにインポートして
3D地図に歩いた軌跡を表示することが出来ました。

そこで、自分のウェブ・ページにこの軌跡がプロットされたGoogleEarthを表示しようと
試みています。

今のところ登録したGoogleEarthAPIキーを使ってGoogleEarthが自分のウェブ・ページ
に表示するところまで漕ぎつけましたが、肝心の軌跡KMLログが反映されていません。

自分のウェブ・ページにGPSログがプロットされたGoogleEarthを載せるにはどうしたら
良いでしょうか?

その手順をご教示頂けるか、どの辺りを勉強したらよいかご教示頂けませんでしょうか?

猶、これまで作業した部分は以下のURLにアップしてあります。

URL: http://longhat.fan-site.net/folder_travel/trav_myoko_ski/page_map.html

以上、宜しくお願い致します

chobeより
ch...@hotmail.co.jp

KF

unread,
Mar 9, 2011, 3:43:54 AM3/9/11
to Google-Maps-API-Japan
すでにKMLデータがあるならば以下のページにある「KMLデータを表示する」のサンプルコードを参考にしてみてください。

http://www.openspc2.org/reibun/Google/Earth/API/ver1/

chobe

unread,
Mar 9, 2011, 8:52:06 AM3/9/11
to Google-Maps-API-Japan
KFさん

早速、ご示唆有難うございました。

残念ながら,頂いたSample に従ってJavaScriptのコードを以下のように変えましたが
今度は地図も表示されなくなりました。

<script type="text/javascript">
google.load("earth", "1");
window.onload = function(){
google.earth.createInstance("gEarth",function(ge){
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var link = ge.createLink("");
link.setHref("http://longhat.fan-site.net/folder_travel/trav_myoko/
110228.kml");
var networkLink = ge.createNetworkLink("");
networkLink.set(link, true, true);
ge.getFeatures().appendChild(networkLink);
});
}

勿論、DIVのidは"gEarth"に変えました。
110228.kmlはプロットしたい軌跡のログ・ファイルです。
何か問題があるでしょうか?

chobeより

KF

unread,
Mar 9, 2011, 10:00:45 AM3/9/11
to Google-Maps-API-Japan
KMLファイルがある

http://longhat.fan-site.net/folder_travel/trav_myoko_ski/110228.kml

にアクセスすると、ファイルがないと表示されてしまいます。
URLはこれで正しいでしょうか?

chobe

unread,
Mar 9, 2011, 8:23:39 PM3/9/11
to Google-Maps-API-Japan
KF様

早速、チェック下さって有難うございます。

確かに
http://longhat.fan-site.net/folder_travel/trav_myoko_ski/110228.kml
にアクセスしますと、ファイルがないと表示されてしまいます。

所が、同レベルにある地図を置いてあるページの
http://longhat.fan-site.net/folder_travel/trav_myoko_ski/page_map.html
にアクセスしますと、Sample適用前のJavaScriptでGoogleEarth地図が表示
されますし、FTPでサーバー側を覗きますと110228.kmlはpage_map.html
と同じレベルに存在しています。アクセス権限もpage_map.htmlと同じになって
います。

一つ気になるのはSampleのFunctionの入っているJavaScriptコードをページ
のHead部分にいれました。 SampleではBodyのDIVの直ぐ下に入ってありま
したが、これは問題ないように思えますが、如何ですか?

小生のSampleコードのテストはホームページ・ビルダー15のプリビュー・モード
でやっていますが、実際にサーバーにアップしないといけないのでしょうか?
Sample適用前のコードはプリビュー・モードで地図が表示されましたが・・・。


再三お手数をかけて申し訳ありません。

chobeより

KF

unread,
Mar 9, 2011, 8:32:22 PM3/9/11
to Google-Maps-API-Japan
> 確かにhttp://longhat.fan-site.net/folder_travel/trav_myoko_ski/110228.kml
> にアクセスしますと、ファイルがないと表示されてしまいます。
 この時点でファイルがないと表示されてしまうとKMLデータは表示されません。
 試しに以下のURLにアクセスしてみてください。同じようにKMLデータをアップして
 あります。

http://www.openspc2.org/reibun/Google/Earth/API/ver1/code/KML/0001/sample/shiojiri.kml



> 所が、同レベルにある地図を置いてあるページのhttp://longhat.fan-site.net/folder_travel/trav_myoko_ski/page_map.html
> にアクセスしますと、Sample適用前のJavaScriptでGoogleEarth地図が表示
> されますし、FTPでサーバー側を覗きますと110228.kmlはpage_map.html
> と同じレベルに存在しています。アクセス権限もpage_map.htmlと同じになって
> います。
 Goolgle Earth&地図はKML適用前は表示されるのはKMLがないからでKMLデータを
 読み込ませるとおかしいのはKMLデータにアクセスできないからではないかと思います。




> 一つ気になるのはSampleのFunctionの入っているJavaScriptコードをページ
> のHead部分にいれました。 SampleではBodyのDIVの直ぐ下に入ってありま
> したが、これは問題ないように思えますが、如何ですか?
 DOMが構築された後でないとGoogle Earthは表示できないので表示する<div>より
 後に書かないといけません。もしくはページのloadイベントを捕捉し、その後で
 実行する必要があります。



> 小生のSampleコードのテストはホームページ・ビルダー15のプリビュー・モード
> でやっていますが、実際にサーバーにアップしないといけないのでしょうか?
> Sample適用前のコードはプリビュー・モードで地図が表示されましたが・・・。
 一応ローカルでも表示はできますが、サーバーにアップして確認する方がよいかと
 思います。



chobe

unread,
Mar 10, 2011, 1:02:10 AM3/10/11
to Google-Maps-API-Japan
KF様

ご示唆に従ってFunctionを含んだJavaScriptコードをDIVの後に移しましたが、KMLファイル
は指定したPathではアクセスできませんので地図は表示されませんでした。

PTFでサーバー側を覗いてみると、KMLファイルは確かに地図を含むHTMLファイルの
page_map.htmlと同列に存在するのに、KMLファイルをアクセスすると、サーバーからの
メッセージが「このファイルはサーバーの範囲内にありません」と言っているので、何らか
の理由でこのKMLファイルはサーバーで認識されないようです。

APIキーが壊れたのではないかと思って、OffLineでこのファイルをダブルクリックすると、
このKMLログで軌跡がプロットされたGoogleEarth地図が表示されるので問題はない筈
です。APTキーが問題ないことを確かめて、再度KMLファイルをアップロードしましたが、
結果は同じでした。

サーバーの種類によってKMLファイルが認識されないという可能性があるでしょうか?
一応、レンタル・サーバーの運用会社に尋ねてみようと思いますが・・・。

再三お手数を掛けます。

chobeより



On 3月10日, 午前10:32, KF <open...@alpha.ocn.ne.jp> wrote:
> > 確かにhttp://longhat.fan-site.net/folder_travel/trav_myoko_ski/110228.kml
> > にアクセスしますと、ファイルがないと表示されてしまいます。
>
>  この時点でファイルがないと表示されてしまうとKMLデータは表示されません。
>  試しに以下のURLにアクセスしてみてください。同じようにKMLデータをアップして
>  あります。
>
> http://www.openspc2.org/reibun/Google/Earth/API/ver1/code/KML/0001/sa...

KF

unread,
Mar 10, 2011, 3:59:15 AM3/10/11
to Google-Maps-API-Japan
> ご示唆に従ってFunctionを含んだJavaScriptコードをDIVの後に移しましたが、KMLファイル
> は指定したPathではアクセスできませんので地図は表示されませんでした。
 試しにlink.setHref()のパラメータで指定しているURLを私のサイトにあるKMLファイルのものにしてみてください。
 このURLを指定して表示されればサーバーにアップしてあるKMLファイルが駄目なのでレンタルサーバー会社などに問い合わせてみるのもよいかと思い
ます。
 もし、表示されないのであればKMLデータとは違う部分が間違っていることになります。

http://www.openspc2.org/reibun/Google/Earth/API/ver1/code/KML/0001/sample/shiojiri.kml

chobe

unread,
Mar 10, 2011, 7:28:24 AM3/10/11
to Google-Maps-API-Japan
FK様

度々お手数掛けて申し訳ありません。

小生のページには色々他のコードもあるので、同じサイトの同じレベルに新しいページを作り
次のようなステップをしてみました。

1. FK様のSampleを全くコピーしました。
2. APIキーだけを小生のキーで置き換えました。
3. KMLファイルへのパスはそのままです。
   ということは、KMLファイルは小生のサーバーに中にはありません。
4. 新しいページを小生のサーバーにアップしましてから、実行してみた。

結果は、太陽のような砂時計が一瞬まわり、止まった。
が地図は現れませんでした。

現在の新しいテスト・ページ全体のコードは以下の如しです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
<META name="GENERATOR" content="JustSystems Homepage Builder Version
15.0.4.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<title>Google Earth API ver 1 Sample/グーグルアースAPIサンプル/Google Earth API?品
</title>
<link rel="stylesheet" href="css/main.css" type="text/css"
media="all">
<script src="http://www.google.com/jsapi?
key=ABQIAAAAcrJy7YsY8h2TrG340xOGVhSkFsteEG3_7QCb4zb1ganv4yBCBRTZ2z26aAZqwBZ-
fniDpZtXMeIN3g"></script>
</HEAD>
<BODY>
<div id="gEarth" style="width:800px;height:500px;"></div>
<script type="text/javascript">
google.load("earth", "1");
window.onload = function(){
google.earth.createInstance("gEarth",function(ge){
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var link = ge.createLink("");
link.setHref("http://longhat.fan-site.net/folder_travel/trav_myoko_ski/
110228.kml");
var networkLink = ge.createNetworkLink("");
networkLink.set(link, true, true);
ge.getFeatures().appendChild(networkLink);
});
}
</script>
</BODY>
</HTML>

この結果からはSampleのコードが何処か壊れたかして?作動していないと
思われますが、如何ですか?

5. KMLへのパスを小生のKMLへのパスに変えて、サーバーにアップして
   実行してみた。

結果は4.の場合と同様に砂時計が現れたが、すぐまわるのが止まって、地図
は表示されない。

これとは別に、レンタル・サーバー会社にメールでKMLへのパスを送り、調査を
依頼しました。

以上

PS: JavaScriptは以前少し勉強したことがありますが、今は詳細をほとんど忘
れてしまっている状態です。

特に、GoogleEarthAPI関連でJavaScriptを勉強するのに良い参考書はありますか?
Amazonで調べると、KML2.2対応 Google Earthコンテンツ&アプリ作成ガイドブック
内部 高志著などという本がありますが、小生のレベルに為になるでしょうか?
> http://www.openspc2.org/reibun/Google/Earth/API/ver1/code/KML/0001/sa...

KF

unread,
Mar 10, 2011, 10:10:26 AM3/10/11
to Google-Maps-API-Japan
念のため動作しているファイルをZIP圧縮して以下にアップしました。ダウンロードしてAPI Keyを書き換えた後、サーバーにアップロードしてくだ
さい。できればホームページビルダーではなく、メモ帳のようなテキストエディタを使って書き換えてください。

http://www.openspc2.org/Google/test/sample2.zip

また、

http://www.openspc2.org/Google/test/

のサンプルが動作するならば、やはりKMLファイルのパスが間違っているか認識されていないのでしょう。
こちらでKMLのパスを指定してみましたが、KMLファイルが見つからないようで駄目でした。

「KML2.2対応 Google Earthコンテンツ&アプリ作成ガイドブック」は持っていないのですが、目次を見る限りでは、ほとんど
JavaScriptによるコントロールや処理について書かれていないような感じです。
現状、Google Earth+JavaScriptであれば、Googleが用意してくれているページやサンプルなどが一番充実しているのではない
かと思います。

http://code.google.com/intl/ja-JP/apis/earth/

chobe

unread,
Mar 10, 2011, 10:22:33 PM3/10/11
to Google-Maps-API-Japan
KF様

個人的なことで何回もお手数を煩わして恐縮です。

早速、第1のSample2のZipファイルをダウンロードして、Windows7で自動解凍したものをSample2のフォルダごと
小生の件のサイトの中に組み込みました。

その上でご指示のように、TeraPadというTextEditorでAPIキーを小生のもので置き換えました。
小生のGoogleEarth地図を置いてあるページ(http://longhat.fan-site.net/folder_travel/
trav_myoko_ski/page_map.html)
からSample2フォルダの中のindex/htmlにリンクを張ってから、サーバーにアップロードしました。

その結果;サーバーにあるSample2の中のindex.htmlにアクセスしますと、そのページはアクセス出来ますが、矢張り昨日と
同じように、太陽印の砂時計が一時回って、直ぐ止まりGoogleEarthの地球儀は表示されません。画面右下隅に利用規約
という文字は現れますが、通常あらわれるGoogleの文字は現れません。

因みにそのページへのリンクを張ったページ(http://longhat.fan-site.net/folder_travel/
trav_myoko_ski/page_map.html)
には以前にGoogleMapのサイトのサンプルからコピーしたコードによってGoogleEarth地図が現れていますので、小生の
やり方はが全く間違えではいないようです。GoogleEarth地図の下に件のKMLファイルでプロットした軌跡を含む地図の
画像コピーも載せてあります。

第2番目に、ZipしていないSampleをLocalで実行してみましたが、これもサーバーにアップロードした場合と同じ状況でした。

以上の2つの実験から考えられることは;
   (1)KFさんの検証済みのコードが何らかの理由で小生のPCの中では働かない
      因みに、小生の使っているOSはWindows7で、ブラウザーはIE8です。
   (2)小生の生成したKMLファイるが何らかの理由でサーバーに認識されない
      但し、小生のウェブ・ページを関与しない生のGoogleEarthではこのKML
      ファイルが受け入れられ、旅行の軌跡がプロットされていますので、KML
      ファイルそのものはGoogleEarthに受け入れられていると思われます。

レンタル・サーバー会社からまだ返事が来ていません。

以上、ご報告まで

何らか手がかりが得られれま幸いです。

chobeより

chobe

unread,
Mar 10, 2011, 11:19:40 PM3/10/11
to Google-Maps-API-Japan
KF様

先程のご報告を済ましてから気付いたのですが、KMLファイルへのパスはKFさんのKMLファイルへのパスのままに
してありました。それで宜しかったでしょうか? お送り頂いたSample2フォルダーの中にもKMLファイルが入ってい
ましたので、それを指すパスにすることも出来ましたが・・・。

JavaScriotのコードの問題が解決して、今の状態で地図が表示されたとしたら、小生のサイトの中にあるKFさんの
KMLファイルを指すパスに変更したときに問題が起きればサーバーとの係わりの問題と判るのですが・・・・。

所で、KFさんから頂いたSampleコードはFunctionがイリコになっていて小生の現在の知識では理解出来ませんでした。
GoogleMapのサイトのSampleはfunction init()、 function initCB(instance) 、
Function failureCB(error code)
という3つの関数からなっていて、比較的単純で判りやすいような気がしました。
色々お手数を掛けていて今更お願いするのは甚だ恐縮ですが、若しこの3つの関数にKMLファイルにリンクするコード
を付け加えるとしたら、どうなるかご教授頂けないでしょうか? 少なくともGoogleMapサイトのSampleからコピーした
ものではGooglrMapが表示されているからと思いましたが、如何でしょうか?

以上、誠に勝手なお願いまで

chobeより
> >http://code.google.com/intl/ja-JP/apis/earth/- 引用テキストを表示しない -
>
> - 引用テキストを表示 -

KF

unread,
Mar 11, 2011, 7:38:10 AM3/11/11
to Google-Maps-API-Japan
Windows 7+IE9でテストしました。どうもIEは変数のスコープが違うみたいなのか、以下のようにしないと駄目みたいです。
これで、やってみてください。


google.load("earth", "1");
var ge = null;
window.onload = function(){
google.earth.createInstance("gEarth", disp, function(){
alert("Error");
});
}
function disp(object){
ge = object;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var link = ge.createLink("");
link.setHref("http://www.openspc2.org/reibun/Google/Earth/API/ver1/
code/KML/0001/shiojiri.kml");

chobe

unread,
Mar 11, 2011, 11:30:14 PM3/11/11
to Google-Maps-API-Japan
KFさん

とんでもないことに巻き込んで大変申し訳ありません。

早速、お送り頂いたJavaScriptをあてて実行してみました。

結果は、次のようなScriptエラーが出ました。

line 27
文字 68 (コピー&貼り付けでやり直してみましたら 85になりました)
エラー: 終了しない文字型の定数です

line27というのはKMLを指定するlink.setHrefのlineのようですが小生には
理解できません。

何か処置を間違えたでしょうか?

猶、レンタル・サーバー会社からは何の返事もありません。
地震騒ぎでそこどこではないのかも知れません。

以上、大変恐縮です

chobeより

KF

unread,
Mar 12, 2011, 3:26:43 AM3/12/11
to Google-Maps-API-Japan
以下のURLにサンプルファイルを圧縮しアップロードしましたので、これをダウンロードして試してみてください。
KMLファイルはアップロードしなくても動きます。

http://www.openspc2.org/Google/test/sample3.zip

chobe

unread,
Mar 12, 2011, 5:42:07 AM3/12/11
to Google-Maps-API-Japan
KFさん

今度お送り下さったSample3を小生のサイトに組み込んで実行しましたら;
APIキーが他のサイトで使われていますというエラーが出ました。
自分のAPIキーに置き換えて実行しましたところ、見事にGoogleEarth地図が
表示されました。

KMLファイルは琵琶湖をなぞったポリゴンですか?が表示されました。
おまけに、今度は回転や拡大縮小のコントロールも付加されていました。
コントロールを含めるコードも加えて下さったのですね。

次に、KFさんのKMLファイルを自分の歩いた軌跡のKMLファイルに置き換えて
実行しましたら、地図は同様に表示されましたが、KML軌跡は表示されませんでした。

これは矢張り小生の使っているサーバーとKMLの相性の問題でしょうか?
FTPでサーバー側を見ますと、間違いなくKMKファイルが地図を含んだページ
と同じレベルにアップされていますので絶対パスは間違いないと思いますが・・・。

サーバー運営会社からは何の返事もないので、今のところ手の打ちようがありません。

色々お願いした序でに大変恐縮ですが、一時的にKFさんのサーバーに小生のKML
ファイルを収納させて頂いて、テストさせて頂くことは出来ませんでしょうか?
ご承知頂ければ、メールに添付してそのファイルを送りますが・・・。

以上、またまた厚かましいお願いまで

chobeより




On 3月12日, 午後5:26, KF <open...@alpha.ocn.ne.jp> wrote:
> 以下のURLにサンプルファイルを圧縮しアップロードしましたので、これをダウンロードして試してみてください。
> KMLファイルはアップロードしなくても動きます。
>
> http://www.openspc2.org/Google/test/sample3.zip

KF

unread,
Mar 12, 2011, 9:57:10 AM3/12/11
to Google-Maps-API-Japan


On 3月12日, 午後7:42, chobe <ch...@hotmail.co.jp> wrote:
> 次に、KFさんのKMLファイルを自分の歩いた軌跡のKMLファイルに置き換えて
> 実行しましたら、地図は同様に表示されましたが、KML軌跡は表示されませんでした。
>
> これは矢張り小生の使っているサーバーとKMLの相性の問題でしょうか?
 こうなるとKMLの問題かサーバー側かどちらかだと思います。



> 色々お願いした序でに大変恐縮ですが、一時的にKFさんのサーバーに小生のKML
> ファイルを収納させて頂いて、テストさせて頂くことは出来ませんでしょうか?
> ご承知頂ければ、メールに添付してそのファイルを送りますが・・・。
 それは構いません。
 KMLファイルをZIP圧縮してメールで送ってください。
 KMLのURLはメールにてお知らせします。

 よろしくお願いします。


chobe

unread,
Mar 14, 2011, 1:59:48 AM3/14/11
to Google-Maps-API-Japan
KFさん 始め皆様

この問題、KMLログをGoogleEarthに反映して軌跡をプロットしたいという問題は、KFさんの何回もの
投稿によるサポートで解決致しました。

問題解決に長引きました原因は;
(1)小生のJavaScriptの経験不足
   これにはKFさんから多大なサポートを戴きました。
(2)小生の利用しているレンタル・サーバー上で、小生の生成したKMLログ・ファイルが認識出来な
   ことかったことが挙げられます。
   サーバー運営会社に現在問い合わせ中ですが、確かにFTPでサーバーにアップロードされてい
   るKMLファイルが何故かアクセス出来ないでいます。FTPでサーバー側にそのファイルが見える
   し、アクセス権も他のファイルのそれと同じなのに、何故か読み出すことが出来ないのです。
   何方かこの原因を思い当たる方がおられましたら、お知らせ下さると有難く思います。
   結果的には、KFさんのサバーに小生のKMLファイルをアップロードさせて戴いて解決しました
   が、小生の利用しているサーバーではチャントアップロードされたKMLファイルがアクセス出来
   ないでいます。

   chobe

kino

unread,
Mar 17, 2011, 8:58:17 PM3/17/11
to Google-Maps-API-Japan
はじめまして chobe さん

原因はファイル名の打ち間違いだと思います。

chobe さんがサーバーにアップしたのは"110228.KML"ですが、コード中では"110228.kml"
と"KML"が小文字になっています。(3月9日午後10:52の投稿)

Windows のファイルシステムでは大文字と小文字を区別しませんが、
ウェブサーバーは区別して取り扱います。

また、コード中で"110228.XML"のフォルダ名が間違っています。
"http://longhat.fan-site.net/folder_travel/trav_myoko/110228.kml"

正しいURLでアクセスするとファイルが見えます。
"http://longhat.fan-site.net/folder_travel/trav_myoko_ski/110228.KML"


サーバー運営会社は悪くないので、念のためお知らせでした。

chobe

unread,
Mar 18, 2011, 5:52:00 AM3/18/11
to Google-Maps-API-Japan
kinoさん

ご指摘有難うございました。

http://longhat.fan-site.net/folder_travel/trav_myoko_ski/110228.kml
で再度アクセスしてみましたが、矢張りアクセス出来ません。
現にこのパスでアップロードしてサーバー側に存在しているのに・・・

chobe

chobe

unread,
Mar 18, 2011, 6:06:31 AM3/18/11
to Google-Maps-API-Japan
kinoさん

ご指摘有難うございました。

ご指摘のように原因はKMLファイルの拡張子が小文字でした:
大文字にしましたら読めました。

些細なことでお手数掛けました。 今後ともよろしく。

chobe
> > サーバー運営会社は悪くないので、念のためお知らせでした。- 引用テキストを表示しない -
>
> - 引用テキストを表示 -
Reply all
Reply to author
Forward
0 new messages