Accessing Google Maps API with JavaScript

Question

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
    var url = "https://maps.googleapis.com/maps/api/place/search/json?key=AIzaSyBnEjp_CRcL_APx4mMsmuke9SV1PWZfnww&sensor=false&location=26.526437,-80.163004&radius=500&keyword=Physican%27s+Weight+Loss+Centers&types=";
    jQuery.getJSON(url, function (data) {
        alert(data);
    });

</script>
</body>
</html>

While running the code above, I'm not getting the alert window. The URL doesn't have any callback function. Any help or useful links how to parse/retrieve data from JSON URL using jQuery or Javascript will be appreciated.

It is probably a cross domain problem, unless you happen to be running this from the same domain (maps.googleapis.com). — gpojd
– gpojd, Commented Sep 24, 2012 at 12:19
sorry i am new to this..what is cross domain problem?..and can u suggest how to retrieve data from url ? — hari86
– hari86, Commented Sep 24, 2012 at 12:28

Paul Tregoing · Accepted Answer · 2012-09-24 12:43:21Z

2

I'm assuming this is cross-domain. In which case the following jQuery should work:

$.ajax(url, {
    crossDomain: true,
    dataType: 'jsonp'
}).success(function(data) {
    alert(data);
}).fail(function() {
    alert('fail');
});

Note: jQuery won't give you access to http status codes on cross-domain requests, it'll just fire .success() on a 200 response, and .fail() on non-200 - e.g. you'll struggle to handle 404 vs. 403 client-side. If you want to have finer control consider using something like jquery-jsonp.

Also worth noting: use a browser debugger (firebug/whatever) this should at least tell you what response is coming back on the ajax request - it might well be that your request is getting a non-200 - this would be a failure case for jQuery. You're a bit limited in what you can do in this case.

Some background reading: http://en.wikipedia.org/wiki/Same_origin_policy

edited Sep 24, 2012 at 12:43

answered Sep 24, 2012 at 12:36

Paul Tregoing

1111 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anders Arpi Over a year ago

This is really neat. I'm not getting to the success callback, but the request actually goes through. Seem to be some JSON error with the response data, which is weird...

Paul Tregoing Over a year ago

Can you tell me what the http response code is that you're getting on that request? Also, the response body would be useful, if you're getting one. What you should see when the server responds correctly is a js function (this is the 'p' part of jsonp) wrapping a json object. The name of the js functions should match the 'callback' parameter which will be part of the request url that jQuery constructs for the .ajax() call.

Anders Arpi Over a year ago

Have a look in the console here: jsfiddle.net/hhKtM/3 (note that I'm not the one who asked the question, just curious :))

Paul Tregoing Over a year ago

Although you're not the original question asker, this is relevant to the original question. Your sample code fails because the handler isn't responding with jsonp. With jQuery.ajax() in cross-domain mode a callback param is added to the url: a correct response will wrap a json object inside a function that has the same name as the callback.But... it is up to the server-side code to implement this.

PhonicUK · Accepted Answer · 2012-09-24 13:51:13Z

2

The headers returned by google for that request don't allow for cross-domain queries.

HTTP/1.1 200 OK
status: 200 OK
version: HTTP/1.1
cache-control: private
content-encoding: gzip
content-length: 1932
content-type: application/json; charset=UTF-8
date: Mon, 24 Sep 2012 12:27:10 GMT
server: mafe
vary: Accept-Language
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

So what you actually need to do is have some code in your server grab the data, then pass it along so you don't violate the cross domain rules.

Either that or see if google offer up a JSONP version of the API.

edited Sep 24, 2012 at 13:51

answered Sep 24, 2012 at 12:28

PhonicUK

13.9k4 gold badges47 silver badges65 bronze badges

Comments

Anders Arpi · Accepted Answer · 2012-09-25 07:45:07Z

1

See Paul Tregoing's post for a good explanation on what is happening and how to get around it in general.

However, in this case there is in fact a proper JavaScript API for Google maps (including Places, which you seem to be using). You can check it out here.

edited Sep 25, 2012 at 7:45

answered Sep 24, 2012 at 12:29

Anders Arpi

8,4373 gold badges35 silver badges49 bronze badges

Collectives™ on Stack Overflow

Accessing Google Maps API with JavaScript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related