content気ままにWebwebに関するもろもろ書いていきます。XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]5前回までは以下の通り。地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]地図、マーカー、情報ウィンドウが表示できたら、地点情報XMLを読み込んで該当する地点にマーカーを表示させます。完成まであと一歩といった感じでしょうか。XMLを読み込むXML読み込み部分を作ります。その前に、XMLがなければどないしようもないので、以下のようなサンプルXMLを用意しました。単純に地点の名称と、緯度経度のXMLデータです。→sample.xmlさて、肝心の読み込みですが、さっと調べてみるとjQueryが便利そうなのでコイツを使います。jQueryは他にも色々な用途で使えるので、遅かれ早かれ導入することになるでしょう。versionをダウンロードしてきます。http://docs.jquery.com/Downloading_jQueryこの時は1.4.2が最新でした。サンプルHTMLと同じディレクトリに保存して、読み込みます。src="jquery-1.4.2.min.js"></script>XMLを読み込むのは以下のサイトを参考にしました。いうか、ソースをほとんどコピーですが。http://h2ham.seesaa.net/article/100408702.htmlXMLを読み込んでしまえば、マーカー表示を呼び出して、該当ポイントにマーカーとふきだしを仕込んでいきます。一足飛びにこんな感じ。$("name",this).text();//マーカーをセットMarkerSet(LocateLat,LocateLng,LocateName);});}});}以下のページで少し調べてみるとhttp://semooh.jp/jquery/api/ajax/jQuery.ajax/options/jQuery.ajax()の他にもjQuery.get()とかいうのもあるようです。ちなみに、jQuery.get()の場合、こんな感じで書くと同じような動作をするみたいですね。$("name",this).text();//マーカーをセットMarkerSet(LocateLat,LocateLng,LocateName);});});}違いは、jQuery.ajax()は読み込みを失敗したときの処理をかけるけど、jQuery.get()は書けないらしいです。あと、jQuery.get()の方が実装が簡単。確かに、ファイル名するだけなんで簡単かなぁ。最後に、地点データを読み込むボタンをHTMLで作ってやります。/></div>完成したコードがこちら。/></div></body></html>→動作サンプル「地点データを読み込む」ボタンをクリックすると、XMLに書いてある地点データがマーカーとして表示されます。マーカーをクリックすると、クリックしたマーカーの名称が表示されます。いい感じになってきました。あと少しと言ったところでしょうか。09:11非常に判りやすい内容で、サイトのような設定が出来たのですが、ファイルの読み込みに失敗します。オリジナル(動作サンプル)ではOKです。ご指導頂けますか?よろしくお願いします。23:41独り言のようなエントリーにコメントありがとうございます。サンプルを拝見させていただきました。sample.xmlをブラウザで開くとXMLパースエラーが出たので、これが原因だと思います。・sample.xmlに入っている「-」を削除をすると、パースエラーが出なくなったので、たぶんこれで表示されると思います。09:20有難うございました。xmlファイルはフォルダーにおいているので、ローカルで動作すると思うのですが、プラウザ経由でないと、前と同じように読めないです。14:58さらにコメントありがとうございます。ブラウザによっては、Javascriptでローカルに保存されたファイルにアクセスできないようです。Chrome6.0、IE8はダメでしたが、Firefox3.6.10だとローカルに保存したxmlファイルを読んでくれました。01:49Chromeで、情報ウィンドウがマーカーの後ろに行ってしまうようです。実は、私も同じ様なものを作っているのですが、この問題で悩んでいます・・・。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。NewMediaThemes。