2011-12-19 25 views
1

このコードを実行すると、空白の画面が表示され、何も表示されません。この権利を取得するために何を変更しなければならないのですか。GoogleのAPIを使用してJsonから地名を取得

 <html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
    <script> 
    $(document).ready(function() { 
    $.getJSON("https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyC1BIAzM34uk6SLY40s-nmXMivPJDfWgTc", 
    function(data, textStatus){ 
alert(data); 
    $.each(data.results,function(i, name) {; 
    $("#placenames").append(i+':'+name.vicinity+'<br/>'); 
}); 
}); 
}); 
</script> 
</head> 
    <body> 
    <div id="placenames"></div> 
    </body> 
    </html> 

答えて

2

あなたはGoogle Maps Javascript APIを使用してみましたか?それはあなたのためのすべてのJSONPのものです。ここで

があなたの座標とのデモです:http://jsfiddle.net/ThinkingStiff/CjfcX/

スクリプト:

var places = new google.maps.places.PlacesService(document.createElement('div')), 
    searchRequest = { 

     name: 'harbour', 
     location: new google.maps.LatLng(-33.8670522, 151.1957362), 
     radius: 500, 
     types: ['food'] 

    }; 

places.search(searchRequest, function (results, status) { 

    var html = ''; 

    for (var index = 0; index < results.length; index++) { 

     html += 
       '<li ' 
      + 'data-location-id="' + results[index].id + '" ' 
      + 'data-address="' + results[index].vicinity + '" ' 
      + 'data-latitude="' + results[index].geometry.location.lat() + '" ' 
      + 'data-longitude="' + results[index].geometry.location.lng() + '" ' 
      + 'data-name="' + results[index].name + '">' 
      + '<div>' + results[index].name + '</div>' 
      + '<div>' + results[index].vicinity + '</div>' 
      + '</li>'; 

    }; 

    document.getElementById('results').innerHTML = html; 

}); 

HTML:

<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=true"></script> 
<ul id="results"></ul> 

出力:

enter image description here

+0

ありがとうございました.. – SANR1103219

+0

クール - どのようにあなたはフィドルであなたの署名を得ましたか?あなたのdownvoteを削除してください。私はJSONPをサポートしていないということを明確にしました。ありがとう – mplungjan

+0

@mplungjan署名はHTMLセクションの途中にあります。私はそれを毎回手動で行います。 Downvoteが削除されました。 – ThinkingStiff

0

あなたはそれがJSONPとして解析されるように、このクエリ文字列を追加する必要があります。

&callback=? 

は、より多くの情報については、このブログ記事を参照してください。

http://www.mattcashatt.com/post/index/Obtaining-and-Parsing-Open-Social-Graph-Data-with-JSONP-and-jQuery

+0

こんにちは、マシュー。どうすれば&コールバックを追加できますか?私のためのサンプルを書く。 – SANR1103219

+0

これは私が叱るかどうか? "https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyC1BIAzM34uk6SLY40s-nmXMivPJDfWgTc&callback=?" – SANR1103219

+0

はい、正しいです。あなたのURLの最後に追加するだけです。それがあなたのために働くなら、この答えを正しいものとして受け入れてください:)。 –

1

、GoogleのAPIをサポートしていません。 jQueryのget/getJSONからのコールバック/ JSONPを

は非同期にロードするには、このような何かをする必要があります。

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

http://code.google.com/apis/maps/documentation/javascript/basics.html#Async

+0

どういう意味ですか? GoogleマップJavascript API(http://code.google.com/apis/maps/documentation/javascript/basics.html)ではJSONPが使用されています。 – ThinkingStiff

+0

@ThinkingStiff - Goole API v3からJSONファイルを取得するためにjQuery getJSONやその他のajaxを使用する例を示してください http://www.quora.com/Why-doesnt-the-Google-Maps-API-サポート-JSONP – mplungjan

+0

ありがとうございました – SANR1103219

関連する問題