Google MapsのKMLをJSONで取得する方法とstatus=0エラーの原因と解決方法

このQ&Aのポイント
  • Google Mapsで作成したマイマップのKMLをJSON形式で取得する方法を紹介します。URLの末尾を「&output=kml」から「&output=json」に変更することでJSON形式で取得できます。
  • ただし、実行するとstatus=0となってしまうことがあります。HTTPヘッダを確認する限り、取得は成功しているようですがなぜでしょうか?原因と解決方法を説明します。
  • status=0エラーは通信が正常に完了しなかったことを示しています。原因としては、クロスオリジン制約によるものやネットワークの問題が考えられます。クロスオリジン制約に対応するためには、CORS(Cross-Origin Resource Sharing)を設定する必要があります。また、ネットワークの問題の場合は、ネットワーク接続の状態を確認する必要があります。
回答を見る
  • ベストアンサー

Google MapsのKMLをJSONで取得したい。

Google MapsのKMLをJSONで取得したい。 Google Mapsで作成したマイマップのKMLを見るとURLが書かれています。 このURLの末尾を「&output=kml」→「&output=json」 と変更するとJSONで取得できると思うのですが、 実行するとstatus=0となっていまいます。 HTTPヘッダを見る限り200なので取得出来ているようなのですが・・・ なぜでしょうか?教えてください。 === var jsonUrl = 'url' var xhr = new XMLHttpRequest(); xhr.open("GET", jsonUrl, true); xhr.onreadystatechange = function() { if (xhr.readState ==4 && xhr.status == 200){ var jresult = document.getElementById("json_panel"); jresult.innerHTML += xhr.responseTEXT; } else { alert (xhr.statusTEXT); } } xhr.send();

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

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

まず、ご提示のソース正しくないです。 つっこみどころ満載です。 とりあえず、 var jsonUrl = 'url'; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4){ if (xhr.status == 200){ alert(xhr.responseText); var jresult = document.getElementById("json_panel"); jresult.innerHTML += xhr.responseText; }else{ alert (xhr.status); } } } xhr.open("GET", jsonUrl, true); xhr.send(null); として下さい。 その上で、0がアラートされれば、アクセスに失敗してるのです。 HTTPヘッダのレスポンスが200でも、外部サイトならアクセス出来ないので、 statusは0のままです。 ※クロスドメインアクセスの禁止って知ってますよね! さらに、JSONがとれたとして、 innerHTMLでつっこんでどおしようってんです。JSONはHTMLじゃないです。 単なるテキストです。 オブジェクト変数につっこんでパースしないと、どおしようもないでしょう。

r5eDANzpaS
質問者

お礼

ご返答ありがとうございます。 ・全体的にXHRの処理はMDCからコピーしたので正しいと思っていました。。。。 https://developer.mozilla.org/ja/XMLHttpRequest ご指摘ありがとうございます。 ・urlの";"は投稿の際の記述漏です。すみません。 ・innnerHTMLに突っ込んでるのは動作確認ようでした。 ・XHR lv2でクロスドメインで通信できるとあったのでいけるかと思ってました。 頂いたコードでも返ってきたコードは0だったので クロスドメインだからだめなのだと思います。 おとなしくローカルでやることにします。。。。 本当にありがとうございました。

関連するQ&A

  • Goole Mapsのマイマップで出力したKMLの座標一覧を取得したい

    Goole Mapsのマイマップで出力したKMLの座標一覧を取得したい。 マイマップの最短経路を求めるために Waypoint一覧を作りたいのですが、 マイマップから出力したKMLにはURLが書かれており 座標の取得方法がわかりません。 どなたか教えてください。 宜しくお願い致します。

  • Google Maps KMLのインポートについて

    Google MapsのマイマップにKMLファイルをインポートをしました インポートはできたのですが、地図の背景がグレイになり、 指定の場所にマーカーが表示されません インポートした緯度・経度 ※東京駅です 35.680865,139.76665 また、エクセルファイルからKMLの作成を、下記のファイルから行っていますが エクセルファイルの一番下に記述した情報しかインポートできません http://beauty.geocities.jp/chirinuruwowahe/CreateKML.xls ※上記のXML作成ファイルは下記ページにあったものです http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1115440731 経度と緯度のとり方が間違っているのでしょうか? Google Mapsの指定の場所で右クリックし、「この場所について」を選び、経度と緯度を取得しています。 また、エクセルの1番下の情報しかインポートしない件については、私のやり方が間違っているのかもしれませんが、もし、他にいいサンプルデータがあれば教えていただけると助かります。 何卒、よろしくお願いします

    • ベストアンサー
    • XML
  • Ajaxでwebページの一部をリロード

    Ajax超初心者です。 http://okwave.jp/qa/q7061328.html これのベストアンサーについてなんですけど、 <script type="text/javascript"> function update(){ var xhr = new XMLHttpRequest(); xhr.open("GET", "/foo.php"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("foo").innerHTML = xhr.responseText; xhr = null; } } xhr.send(null); } </script> これって例えば「1分後に自動的にリロードする」というような指示は どこを変更して指示したらいいんでしょうか。 もしこの方法ではそういう指定ができないのなら、 指定できる方法を教えてください。

  • jQuery.ajax()のリクエストが返らない

    下のような通信処理を書いています。 var returnObj = null; var errorMsg = ''; function getAjaxHttpRequest(prms) { returnObj = null; if (prms["sendXml"] == null) { prms["sendXml"] = ""; } jQuery.ajax({ contentType: prms["contentType"] , type: prms["type"] , url: prms["url"] , timeout: prms["timeout"] , cache: prms["cache"] , async: false , processData: false , data: "formId=" + prms["formId"] + "&submitStatus=" + prms["submitStatus"] + "&appId=" + prms["appId"] + "&data=" + prms["sendXml"] , success: function(data, dataType) { errorMsg = ""; } , error: function(XMLHttpRequest, textStatus, errorThrown) { errorMsg = textStatus + ' - ' + errorThrown; } , complete : function(xmlHttpRequest, textStatus) { var READYSTATE_COMPLETED = 4; if( xmlHttpRequest.readyState == READYSTATE_COMPLETED ) { var HTTP_STATUS_OK = 200; if( xmlHttpRequest.status == HTTP_STATUS_OK ) { returnObj = { resultCode: 'success' , data: xmlHttpRequest.responseText }; } else { if (xmlHttpRequest.responseText == '') { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: errorMsg }; } else { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: xmlHttpRequest.responseText }; } } } else { returnObj = { resultCode: 'error' , textStatus: xmlHttpRequest.readyState + " - " + xmlHttpRequest.status + " - " + xmlHttpRequest.statusText , responseText: xmlHttpRequest.responseText }; } errorMsg = ''; } }); return returnObj; } まれに最後のreturnObjがnullで返ってくるようです。なぜでしょうか? 何が起きている可能性があるでしょうか。 jquery-1.4.3です。

  • Ajaxによる非同期通信のイベントリスナ

    JavaScriptで以下の関数を実行した場合、(1)の実行後関数を抜けるので、 (2)のイベントリスナは(1)の実行後も呼ばれることはあるのでしょうか。    function hoge(){     var xhr = new XMLHttpRequest();     xhr.open("GET","http://www.example.com/data.txt");     xhr.onreadystatechange = function(){ //(2)      if(xhr.readyState == 4 && xhr.status == 200){       $("#foo").html(xhr.responseText);      }     }     xhr.send(null); //(1)    } ローカル変数xhrは、関数を抜けたら変数とその領域が解放されるので、 XMLHttpRequestインスタンスも消滅する、そして、インスタンスが 消滅してしまうと、onreadystatechangeプロパティも消滅すると思っ たためです。 (2)が(1)の実行後も呼ばれるとしたら、どのような仕組になっていると 理解すればよいのでしょうか。

  • responseTextのデータをevaluate

    JavaScriptのXMLHttpRequestで別のHTMLページのソースをresponseTextで取得し、 そのHTMLソースに対してdocument.evaluate関数をかけたいと考えております。 しかしうまく行かず、恐らく内容はHTMLソースとは言ってもテキストデータであり、 documentオブジェクトではない為にevaluateがかけられないのだろうと推測しております。 DOMParser().parseFromStringでテキスト→XMLオブジェクトへの変換は見つかったのですが それではうまく行かず、documentオブジェクト(HTMLオブジェクト)への変換方法は 見つけることができず困っております。 環境としてはFirefoxアドオンのGreasemonkeyスクリプトとして、上記処理を実装したいと 考えております。 尚、問題部分は下記のような記述して試しております。 var xhr = new XMLHttpRequest(); xhr.open("GET", "別ページURL", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var txt = xhr.responseText; var snap = txt.evaluate('//h1[@id = "siteID"]', document, null, 7, null); alert(snap.snapshotLength); } } xhr.send();

  • GoogleマップでKMLが読み込めない

    Google Mapで作成したKMLファイルをマイマップで 読み込もうとすると、以下のエラーが出て読み込めません。 ==================== モジュール仕様の解析エラー: 行 1、列 39 <?xml version="1.0" encoding="Shift_JIS"?> XML 解析エラー: Unsupported encoding Shift_JIS ==================== Googleマップの地図検索にアップロードしたKMLファイルのURLを 入力すると、プロットした位置情報などは表示されるのですが。 どのようにしたら、マイマップに取り込めるのがお分かりの方、 ご教示ください。因みにアップロードしたデータはサクラエディタで UTF-8で保存してます。

    • 締切済み
    • XML
  • Google maps api v3

    https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja を参考にコーディングし、いろいろなサイトも調べてながら(手探り)ですが、どうしてもうまく表示されません。 【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。 うまく表示されないというか、画面が真っ白になってしまいます。 アドバイス等ご教示頂ければ幸甚です。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jacascript"> //<![CDATA[ function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.66, 139.69), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("maps.php", function(data) { var xml = parseXml(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[[]i].getAttribute("name"); var address = markers[[]i].getAttribute("address"); var tel = markers[[]i].getAttribute("tel"); var email = markers[[]i].getAttribute("email"); var message = markers[[]i].getAttribute("message"); var point = new google.maps.LatLng( parseFloat(markers[[]i].getAttribute("lat")), parseFloat(markers[[]i].getAttribute("lng"))); var html = "" + name + " " + address; var icon = customIcons[[]type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); 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); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>

  • JSONのデータから商品名の取得の仕方

    今現在下記の記述でJSONを取得しています。 ===== <html> <head> <title>JSONのデータを使ってみる</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch_json.php'; var paramList = "keyword=" + encodeURIComponent("ふくろう"); var a = new Ajax.Request( url, { method: 'get', parameters: paramList, onSuccess: function(request) { // alert('読み込み成功しました'); // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onComplete: function(request) { alert('読み込みが完了しました'); $('container').innerHTML = request.responseText; // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> <body> <div id="container">content</div> <button onclick="execute()">サンプル実行</button> </body> </html> ===== このままだと、プレーンテキストは表示されるのですが、商品名や価格の一覧などを選択して表示できません。 evalなどを使うのかなと思うのですが、はっきり分かりません。 ヒントを教えていただけないでしょうか。

    • ベストアンサー
    • AJAX
  • google maps api ルート線変更

    Google Maps JavaScript API v3 でルート検索で表示されるポリラインの色や太さを変更したいのですが行き詰ってます。 ネットで調べてますと、polylineOptionのstrokeColorやstrokeWeightなどで変更できるような事は書いてあるのですが、どうやってもうまくいきません。 Googleデベロッパーで紹介されています下記のルートサービスのひな形をもとにいろいろやっているのですが、どこにどのように記述すればいいのでしょうか。 ------------------------------------------------ var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsDisplay.setMap(map); } function calcRoute() { var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = { origin:start, destination:end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); } --------------------------------------------------

専門家に質問してみよう