GoogleMapsAPIv3でXMLを取得

前へ 次へ
このQ&Aのポイント
  • Google Maps API v3を使用して、サーバー上のXMLファイルからマーカーを表示する方法について調査しました。
  • XMLファイル内の<marker>タグから緯度と経度を取得する方法について調べました。
  • 提供されたXMLデータの場合、<Latitude>と<Longitude>タグから数値を取得する方法が分かりません。
回答を見る
  • ベストアンサー

GoogleMapsAPIv3でXMLを取得

Google Maps API v3でサーバー上にあるXMLファイルを利用して、マーカーを出現させようと思います。 いろいろ調べていたところ、XMLのデータが <markers> 　<marker lat="37.413320" lng="-122.125604"/> 　<marker lat="37.433480" lng="-122.139062"/> </markers> 上記のような場合、 var markers = data.documentElement.getElementsByTagName("marker")でXMLのデータを取得し、数値を使いたいところで、 getAttribute("lat") getAttribute("lng") を使うことは調べていてわかりました。 しかし、 <markers> <Latitude>35.679858</Latitude> <Longitude>13.689478</Longitude> </markers> このようにXMLデータが書かれている場合、どのようにLatitude, Longtitudeの値を取得すればいいのかがわかりません。XMLは提供されているものを利用するので、変更できません。 このような場合の数値の取得方法がわかる方いらっしゃいましたら教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

Xpathを使ったほうが楽だけれど、同じくgetElementsByTagName使っても 出来ますよ。getAttributeの代わりに子供・末端（テキストノード）の 値を取得すればよいでしょう。 var markers = data.documentElement.getElementsByTagName("marker"); var lat = markers[0].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue; var lng = markers[0].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue;

pickpio
質問者

お礼

回答ありがとうございます。 ひとまず今回の疑問点は解決しました！嬉しいです。 また新たな問題も出てきたので、解決できなければ再度この場を借りるかもしれません。 ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Google Mapsからxmlファイルの読み込み

    お世話になっております。 質問はタイトルの通りです。javascriptのソースを以下のようになります。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー var map; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(34.5927356,135.50753655), 5); GEvent.addListener(map, "click", clickAction); } } function downloadData(){ GDownloadUrl("http://○○/yahoolocaltest2.php", function dispData(data, statusCode){ var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var lats = markers[i].getElementsByTagName("lat"); var lngs = markers[i].getElementsByTagName("lng"); var names = markers[i].getElementsByTagName("name"); var lat = parseFloat(GXml.value(lats[0])); var lng = parseFloat(GXml.value(lngs[0])); var name = GXml.value(names[0]); map.addOverlay(createMarker(lat, lng, name)); } }); } function createMarker(lat, lng, name) { var marker = new GMarker(new GLatLng(lat, lng)); var html = "<p>" + name + "</p>"; GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(html); }); return marker; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 動けない所： function downloadData()の所には”yahoolocaltest2.php”というファイルを読み込みたいですが、マーカがでないです。 xmlデータは”~~.php”なんですが、実行結果は以下のようなxmlデータに整いました。 <?xml version='1.0' encoding='UTF-8' ?> <markers> <marker> <lat>35.2570706</lat> <lng>140.3977072</lng> <name>千葉県いすみ市</name> </marker> <marker> <lat>35.6766300</lat> <lng>139.7425472</lng> <name>東京都千代田区</name> </marker> <marker> <lat>35.6785042</lat> <lng>139.7415028</lng> <name>東京都千代田区</name> </marker> </markers> この結果は"~~.xml"という名前の保存したら、表示できますが。”~~.php”の形式なら表示できないです。 全くの新人なんですが、ご指導をお待ちしております。ありがとうございます。

  • GoogleMapsAPIv3でXMLを取得(3)

    お世話になっております。 何度か質問しているのですが、新たに質問したいことがあります。 現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。 　function initialize() { var myLatlng = new google.maps.LatLng(16.636192,158.9062); var myOptions = { zoom: 1, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var infowindow = new google.maps.InfoWindow; downloadUrl("xml/allplaces.xml", function(data) { var markers =　data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var linkurl = markers[i].getAttribute("linkurl"); var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>'; var marker = new google.maps.Marker({ map: map, position: point, title: name }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } 10行目の downloadUrl("xml/allplaces.xml", function(data) { の部分でXMLを指定していますが、これをHTML上の <input type="button" id="btn" value="" onClick="" /> といった、ボタンファンクションで、異なるXMLを指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。

  • googlemapでの位置の表示

    現在、googlemapを用いて、テーマパークだけを表示させるプログラムを作ってます。 今作っているプログラムは位置情報を読み込む際にxmlファイルから読み込んでいるのですが、xmlファイルの位置情報をランダムに取得して表示させたりすることは出来るのでしょうか？下のxmlファイルでしたら、お台場と東京タワーだけ表示みたいな形で… ↓xmlファイル <markers> <marker lat="35.62882" lng="139.777508" html="お台場" label="お台場" n="1"/> <marker lat="35.658632" lng="139.745411" html="東京タワー" label="東京タワー" n="1"/> <marker lat="35.729539" lng="139.718172" html="サンシャイン60" label="サンシャイン60" n="1"/> <marker lat="35.660423" lng="139.729204" html="六本木ヒルズ" label="六本木ヒルズ" n="1"/> <marker lat="35.7174" lng="139.771347" html="上野動物園" label="上野動物園" n="1"/> <marker lat="35.715491" lng="139.794669" html="花やしき" label="花やしき" n="1"/> <marker lat="35.741964" lng="139.647941" html="としまえん" label="としまえん" n="1"/> <marker lat="35.717588" lng="139.276707" html="東京サマーランド" label="東京サマーランド" n="1"/> </markers> ↓xmlの読み込み部分のjavascript // ===== XML呼出 ===== function readMap(url) { var request = GXmlHttp.create(); request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = GXml.parse(request.responseText); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); map.getInfoWindow().hide(); map.clearOverlays(); for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); 　 var points = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); var n = markers[i].getAttribute("n"); var marker = createMarker(points,label,html,n); map.addOverlay(marker); } なんかいい工夫はあるのでしょうか？ やり方も教えていただけると助かります。 何かいい方法がありましたらご教授お願いします。。

  • GoogleMapsAPIv3でXMLを取得(2)

    以前も一度質問しましたが、新たな障壁が出てきたので同じタイトルで質問させていただきます。 Google Maps API v3でサーバー上にあるXMLファイルを利用して、マーカーを出現させようと思います。 現在以下のようなコードで挑戦しています。 <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="util.js"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(35.682956, 139.727554); var myOptions = { zoom: 12, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); downloadUrl("http://ja.xml", function(data) { var markers = data.getElementsByTagName("Event"); for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue); var lng = parseFloat(markers[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue); lat = lat - lat * 0.00010695 + lng * 0.000017464 + 0.0046017; lng = lng - lat * 0.000046038 - lng * 0.000083043 + 0.010040; var latlng = new google.maps.LatLng(lat,lng); var marker = new google.maps.Marker({position: latlng, map: map}); } }); } </script> </head> このコードの場合、同ディレクトリ、または同サーバーにあるXMLを読み込むとうまく動作したのですが、Web上で公開されているようなXMLだとうまく表示されませんでした。 downloadUrlというのは同サーバーの物しか対応していないのでしょうか。 それとも他に原因が考えられますか？ ご存じの方いらっしゃいましたらよろしくお願い致します。

  • XMLを読み込んでサイドバー付きでGoogleMapを表示させるものを

    XMLを読み込んでサイドバー付きでGoogleMapを表示させるものを、色々参考にしながら作成しています。 先日、こちらの掲示板で質問させていただき、アドバイスをいただいてJavaScriptの中身を改変してみたのですが、状況が変わってきましたので、前回の板を閉めて、改めて質問させていただきました。 （初回質問） http://questionbox.jp.msn.com/qa5860644.html 【動作サンプル】 http://6pesos.googlecode.com/svn/trunk/xml.html ↑のサンプルのXMLの読み込み部分を以下のように修正してみました。 【修正内容】 GDownloadUrl("data/example-xml.xml", function(data, responseCode) { // XMLファイルの名称・場所 if(responseCode == 200) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); var side_bar = document.getElementById("side_bar"); side_bar.innerHTML = ""; for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getElementsByTagName("lat")[0].nodeValue), parseFloat(markers[i].getElementsByTagName("lng")[0].nodeValue)); var label = markers[i].getElementsByTagName("label")[0].nodeValue; var html = markers[i].getElementsByTagName("html")[0].nodeValue; var marker = createMarker(point, label, html); map.addOverlay(marker); var side_barEntry = createside_barEntry(marker, label); side_bar.appendChild(side_barEntry); } 【XMLファイル】 <?xml version="1.0" encoding="UTF-8"?> <markers> <marker> <lat>00.000000</lat> <lng>00.000000</lng> <label>●●●</label> <html>▲▲▲</html> </marker> </markers> これらを表示させてみたのですが、エラーが出て表示されません。 エラーの内容は以下です。 メッセージ: 引数が無効です。 ライン: 137 文字: 18 コード: 0 URI: http://maps.gstatic.com/intl/ja_ALL/mapfiles/225b/maps2.api/main.js 検索して調べてみたのですが、解決法が分かりませんでした…。 サイドバーなしのMAPのみだと、このようなXMLの記述方法で表示可能なようですが、サイドバーがあるMAPにするとエラーが出ます。 解決法が分かる方いらっしゃいましたら、ご教授いただけませんでしょうか。 参考URLでもかまいませんので、よろしくお願い致します。

  • GoogleMap APIマーカーマネージャーとXMLの読み込み

    Google Codeのページ http://code.google.com/intl/ja/apis/maps/documentation/overlays.html#Marker_Manager に載っていたマーカーマネージャーを使用し、さらにGDownloadUrlでXMLを読み込んで http://code.google.com/intl/ja/apis/maps/documentation/services.html 地図を作成しようとしております。 現在記述は以下のようになっています。 ----- var map = null; var mgr = null; var batch = []; function setupMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.66332844365397,139.7321891784668),16); map.addControl(new GLargeMapControl()); map.enableDoubleClickZoom(); window.setTimeout(setupMarkers, 0); } } function getMarkers() { GDownloadUrl("○○○.xml", createMap); return batch; } function createMap(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var markeropts = new Object(); markeropts.title = name; var marker = new GMarker(new GPoint(lng,lat), markeropts); batch.push(marker); // ※1 } return batch; } function setupMarkers() { mgr = new MarkerManager(map); mgr.addMarkers(getMarkers(), 14); mgr.refresh(); } ----- いろいろと検証の結果、XMLの読み込みはうまくいっており、※1のところでbatchにはちゃんとpushされていることは確認したのですが、最終的にマーカーは表示されません。 function getMarkersが function getMarkers() { var batch = []; var markeropts = new Object(); markeropts.title = "六本木"; var marker = new GMarker(new GPoint(35.66332844365397,139.7321891784668), markeropts); batch.push(marker); return batch; } の時はマーカーがちゃんと表示されたことも確認しております。 どこがおかしいのでしょうか？ また、根本的に間違っているor他にいい方法があるのであればご教示ください。 よろしくお願い致します。

  • XMLデータを読み込んでGoogleMapに表示し、以下のような感じで

    XMLデータを読み込んでGoogleMapに表示し、以下のような感じでカテゴリわけして、サイドバーに表示させたいと考えています。 ↓サイドバー↓ -------------- ○○市 aaaaa △△市 bbbbb ccccc -------------- マップはこちらのものを参考にして作成しています。 http://japonyol.net/editor/xml.html このXMLに「category」という項目を増やして、それをサイドバーに反映させたいのですが、方法が分からず困っています。 XMLを <markers> <marker lat="xxxxx" lng="xxxxx" name="aaaaa" category="○○市"> <marker lat="xxxxx" lng="xxxxx" name="bbbbb" category="△△市"> <marker lat="xxxxx" lng="xxxxx" name="ccccc" category="△△市"> </markers> として、新しい「市」はXML上で増やすと、新しいカテゴリとして反映されるようにしたいのです。 分かる方いらっしゃいましたら、ご教授いただけませんでしょうか。 もしくは、参考サイトでもかまいませんので、よろしくお願い致します。

  • GoogleMapでxmlから10件のみ情報取得

    今、googlemapで、xmlに書き出されたデータをjavascriptで呼び出し、地図外に一覧を表示させています。 現在のスクリプトでは、xmlデータ全件取得されています。 マップ上のポイントは前件表示、一覧表示部分のみ10件のみ表示に変更させる場合の書き方がわかりません。 初心者なりに、色々とやってみたのですが、うまくいかず。。。 ご指導いただけると助かります。 ****************************************** <script type="text/javascript"> var map; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById('map')); ・・・ } GDownloadUrl('http://○○.jp/map.xml', function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); var shopList = document.getElementById('map_text'); ・・・ for (var i = 0; i < markers.length; i++) { var shop = markers[i].getAttribute('shop'); var text = markers[i].getAttribute('text'); ・・・ var marker = createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl); var sidebarEntry = createSidebarEntry(marker,shop, text); map.addOverlay(marker); shopList.appendChild(sidebarEntry); } }); } function createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl) { ・・・ ｝ function createSidebarEntry(marker, shop, text) { var shopList = document.createElement('div'); shopList.id = "map_text"; var maplist =shop + '<br/>' + text;　　←※ここで呼び出される情報を10件に限定したい shopList.innerHTML = maplist; GEvent.addDomListener(shopList, 'click', function() { GEvent.trigger(marker, 'click'); }); return shopList; } </script> ******************************************

  • サイドバー付きでGoogleMapを表示させるものを、色々参考にしなが

    サイドバー付きでGoogleMapを表示させるものを、色々参考にしながら作成しています。 【動作サンプル】 http://6pesos.googlecode.com/svn/trunk/xml.html ↑このサンプルのようにxmlファイルを読み込む形をとりたいのですが、 【A.xml】 <markers> <marker lat='xxx' lng='xxx' html='テスト' label='１'/> </markers> だと、きちんと表示できるのですが、 【B.xml】 <markers> <marker> <lat>xxx</lat> <lng>xxx</lng> <html>テスト</html> <label>１</label> </marker> </markers> だと、表示できず「documentElement は Null またはオブジェクトではありません」というエラーが出ます。 スクリプトの中身をいじってみたのですが、お手上げです。 ■【B.xml】の書き方のXMLを読み込めるようにJavaScriptの中身を改変 ■【A.xml】をエクセルのようなセル形式で編集する方法・ツール（もしくはエクセルでの編集・保存方法） ※Excel2003で「xmlリストとして開く」→「ファイル種類：XMLデータで保存」→「ワークシートの機能が失われる…と警告」→続行で保存→ブラウザで表示させると「引数の数が一致していません。または不正なプロパティを指定しています。」とエラーになります…。 どちらか分かる方いらっしゃいましたら、ご教授いただけないでしょうか。 よろしくお願い致します。

  • GXmlHttpにPHPからXMLを渡したい。

    グーグルマップで、MYSQLから取得したデータを表示したいと考えています。 GXmlHttpを使ってphpのデータを取得するプログラムを組んだのですが、phpファイルでうまくデータを取得できません。 data.php -------------------------------------------------------- <?php mb_http_output('utf-8'); header('Content-type: text/xml; charset=utf-8'); echo '<?xml version="1.0"?>'; echo("<markers>"); $con=mysql_connect("**********","***","*****"); $selectdb=mysql_select_db("***",$con); $sql = "select * from map"; $result=mysql_query($sql,$con); while ($row=mysql_fetch_array($result)) { //緯度・経度を取得 $x = $row[x]; $y = $row[y]; //場所名 $basyo = $row[basyo]; echo("<marker lat=\"$x\" lng=\"$y\" html=\"$basyo\"/>"); } echo("</markers>"); ?> -------------------------------------------------------- というプログラムなのですが、 -------------------------------------------------------- テキストの内容に無効な文字が見つかりました。リソース 'http://www.********.com/map/joho.php' の実行エラーです。ライン 1、位置 74 <?xml version="1.0"?><markers><marker lat="36.6585" lng="138.7413" html=" -------------------------------------------------------- とエラー表示されてしまいます。 ちなみに、緯度・経度のみのデータ取得ならうまく表示されました。 ということは、「$basyo」が漢字を使う日本語だからなのでしょうか？ このような場合、どうすればうまくデータベースからデータを取得できるのでしょうか？ どうかよろしくお願いします。

    • 締切済み
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する