道東ドライブ：Google Maps API Traial_3
エントリー＜秋の網走・知床・阿寒・摩周・屈斜路湖：レンタカードライブ＞では、 ZENRIN の地図をキャプチャーしたものを使った。内容を同じにして、地図を Google Maps API に変更した。地図の右サイドの地名をクリックすると該当する場所のマーカーに吹き出しが出て、その中のリンクをクリックすると写真が出るようになっている。その他、拡大・縮小、ドラッグしての移動、航空写真にするなど Google Map の機能はそのまま使える。この Google Maps API 導入には、いささかの学習を必要としたので、私のような初心者向けに学習体験を地図の下に備忘録的に記したい。
前のエントリー＜泉北近辺私的観光地図：Google Maps API Trial_2＞と異なる点は、地図の右サイドに地名を並べ、それをクリックすると目的とする地点のマーカーに飛ぶようにしたことである。この API の題材は、前のエントリーでも紹介した Google Maps API Tutorial からいただいたものである。前のエントリーでは、sample のソースコードをコピペし、Google Maps API キーを自分用に変えたり、data を変更するだけで上手く導入することができた。
今回いただいた sample (Part 3) は、 xml ファイルを使うことになっている。今回も xml ファイルをコピペしたらいいと思っていたが、そうは単純にいかなかった。コピペだけで上手くいかないとなると基礎知識が希薄であるから、どこをさわったらいいのか見当がつかない。 IE7の問題なのかなどと勘ぐったが、Firefoxでも上手くいかない。Firefox では、 以下のようなメッセージが出る。
IEでも似たようなメッセージがたびたびでる。 Ajax を良く理解していないと思い調査したが、Ajax についてのサイトはちょっと高度で敷居が高い。が、そんなに高度の問題でもないようだ。どうやら xml ファイルへの理解が少ないことが原因らしいと思われたので、基礎から学習することにした。xml を教えてくれるサイトは「たのしいXML」のような日本語のサイトがあるがもうひとつピンとこない。Google で "xml tutorial" でサーチしてみると英語の世界にに基本から教えてくれるサイトがあった。W3 Schools である。このサイトのXML Tutorial を最初から読んでいくと優しい英語で非常に分かりやすい。XML Basic の９講座あたりに、自分で作った xml ファイルをファイルの中身をコピペするのとファイル名を入れて、それぞれ validate する個所がある。ファイルの中身のコピペではエラーを起こさなかったが、ファイル名をいれると何の表示もない。Note: をみるとどうやらクロスドメインの問題らしい。ここからヒントをもらい今まで、Dreamweaver を使ってPC のC:ディレクトリーに JavaScript を置き、呼んでくる xml ファイルをレンタルサーバー上に置いていたので上手くいかなかったようだ。JavaScript を含んだHTMLファイルもサーバー上に置いたら、望む結果が得られた。JavaScript に xml ファイルをよんでくるには、同じドメインでないと駄目のようである。 目的としていることができたのでxml の学習は中断してしまったが、機会を見て続きを勉強したい。
Google Maps API には、ルートに色を付ける方法も用意されているようなので再度挑戦してみたい。
なお、xml ファイルのデータとして書き込む地点の経度・緯度を得るには、Google Map で望む地点をダブルクリックして、右上のメールをクリックすると送信フォームの中に数字が示されるので、それをコピペすれば楽である。正確性を期するならば、国土地理院の「ウオッ地図」で目的地点の経度・緯度が求められるが、度以下の少数部分は計算が必要である。
Google Maps API に取り組んでから、アルツハイマーになりつつある頭脳弱体化防止には少し役立ったかもしれない。
前のエントリー＜泉北近辺私的観光地図：Google Maps API Trial_2＞と異なる点は、地図の右サイドに地名を並べ、それをクリックすると目的とする地点のマーカーに飛ぶようにしたことである。この API の題材は、前のエントリーでも紹介した Google Maps API Tutorial からいただいたものである。前のエントリーでは、sample のソースコードをコピペし、Google Maps API キーを自分用に変えたり、data を変更するだけで上手く導入することができた。
今回いただいた sample (Part 3) は、 xml ファイルを使うことになっている。今回も xml ファイルをコピペしたらいいと思っていたが、そうは単純にいかなかった。コピペだけで上手くいかないとなると基礎知識が希薄であるから、どこをさわったらいいのか見当がつかない。 IE7の問題なのかなどと勘ぐったが、Firefoxでも上手くいかない。Firefox では、 以下のようなメッセージが出る。
この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。
IEでも似たようなメッセージがたびたびでる。 Ajax を良く理解していないと思い調査したが、Ajax についてのサイトはちょっと高度で敷居が高い。が、そんなに高度の問題でもないようだ。どうやら xml ファイルへの理解が少ないことが原因らしいと思われたので、基礎から学習することにした。xml を教えてくれるサイトは「たのしいXML」のような日本語のサイトがあるがもうひとつピンとこない。Google で "xml tutorial" でサーチしてみると英語の世界にに基本から教えてくれるサイトがあった。W3 Schools である。このサイトのXML Tutorial を最初から読んでいくと優しい英語で非常に分かりやすい。XML Basic の９講座あたりに、自分で作った xml ファイルをファイルの中身をコピペするのとファイル名を入れて、それぞれ validate する個所がある。ファイルの中身のコピペではエラーを起こさなかったが、ファイル名をいれると何の表示もない。Note: をみるとどうやらクロスドメインの問題らしい。ここからヒントをもらい今まで、Dreamweaver を使ってPC のC:ディレクトリーに JavaScript を置き、呼んでくる xml ファイルをレンタルサーバー上に置いていたので上手くいかなかったようだ。JavaScript を含んだHTMLファイルもサーバー上に置いたら、望む結果が得られた。JavaScript に xml ファイルをよんでくるには、同じドメインでないと駄目のようである。 目的としていることができたのでxml の学習は中断してしまったが、機会を見て続きを勉強したい。
Google Maps API には、ルートに色を付ける方法も用意されているようなので再度挑戦してみたい。
なお、xml ファイルのデータとして書き込む地点の経度・緯度を得るには、Google Map で望む地点をダブルクリックして、右上のメールをクリックすると送信フォームの中に数字が示されるので、それをコピペすれば楽である。正確性を期するならば、国土地理院の「ウオッ地図」で目的地点の経度・緯度が求められるが、度以下の少数部分は計算が必要である。
Google Maps API に取り組んでから、アルツハイマーになりつつある頭脳弱体化防止には少し役立ったかもしれない。
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)