Google Maps URL doesn't return the JSON object?

Question

$(document).ready(function () {
    $.getJSON('https://maps.googleapis.com/maps/api/place/textsearch/json?query=Kfc+sydney&sensor=true&key=AIzaSyD-jxenRCJipqw5Kg-HXQbRXUK8dHNFz3A',
    function (data) {
        alert(data);
    });
});

My Google Maps URL shows the JSON object when requesting it from the browser but not from using jQuery.

Answer 1

Use the Places-Library of the Maps-Javascript-API to request the service from a javascript-application.

<script type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false">
</script>

<script  type="text/javascript">
/*<![CDATA[*/
$(document).ready(function () {
    new google.maps.places.PlacesService(document.createElement('div'))
     .textSearch({query:'KFC sydney'}, function(data){console.log(data);});
});
/*]]>*/
</script>

Answer 2

You need to pay more attention to your browser's JS console.

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/textsearch/json?query=Kfc+sydney&sensor=true&key=AIzaSyD-jxenRCJipqw5Kg-HXQbRXUK8dHNFz3A. Origin http://jsbin.com is not allowed by Access-Control-Allow-Origin.

You are trying to violate the Same Origin Policy. Some work arounds are described in answers to this question.

Answer 3

See also: Google Maps V3 Geocoding Lookup using getJSON

FYI - if you are running a server-side language, such as PHP or JSP, you will be able to use the maps api url, as there are no javascript cross-domain issues with that approach, and you could write a page to effectively act as a proxy if you need to use javascript for handling the JSON.