JQuery won't get json?

Question

So I'm trying to complete the simple task of getting json data from google, but this little bit of jquery code won't run. Will you please help me figure out why?

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false", function(jsondata) {
            alert(jsondata.status);
    });
  });
  </script>

Best solution: add "&callback=?" to the end of the url. Thank you so much for all your help guys!

use it in place of `alert()`. depending on your browser you should have a debug console. Firebug in Firefox works very well, Chrome it's built in (ctrl+shift+i) — philwinkle, Mar 12 '11 at 06:50
`console.log` is nice, but causes script error in IE9 unless the debug console is open. — Mikael Östberg, Feb 18 '13 at 21:21

score 12 · Answer 1 · edited May 23 '17 at 10:28

Yup, this is absolutely a Same Origin Policy bug.

It seems that the latest version of the Google Maps API (v3) does not support jsonp. As a result, if you want to geocode, you're going to need to use the maps api:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>
    $(document).ready(function(){
        var loc = "1600 Amphitheatre Parkway, Mountain View, CA";
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( {'address': loc },
            function(data, status) { console.log(data); });
    });
</script>

Other alternatives:

Use a 'proxy' service, as ctcherry pointed out, to fetch the data for you.
Use the old V2 API with JSONP, but you'll need a Maps API key.

score 5 · Accepted Answer · answered Mar 12 '11 at 06:48

5

Its called the Same Origin Policy. In short: the domain that your code is on, is the only domain your javascript can communicate with (by default)

You get an error like this:

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

answered Mar 12 '11 at 06:48

Chris Cherry

28,118
6
68
71

1

Well thank you so much for pointing out my problem. Do you have any knowledge of a fix for this sort of issue? – Andrew Mar 12 '11 at 06:56
You can create a local proxy with PHP or another scripting language that will take the URI as a variable and fetch it. Then PHP/other returns the result. – philwinkle Mar 12 '11 at 07:00
1

You would want to proxy that request through some server side code that is running on the same domain as the javascript. Also: If you controlled the domain that you were calling into you could use special headers (http://www.w3.org/TR/cors/) to allow cross-domain requests. But since its google, you can't add the headers to their code. Another possibility is if their API support JSONP which allows the JSON response to be wrapped in a callback that would call your code (http://www.ibm.com/developerworks/library/wa-aj-jsonp1/) not sure if that API supports it tho, so you'll have to check on that – Chris Cherry Mar 12 '11 at 07:01
Let's clarify one thing: Same Origin Policy alone is not the reason why you can't get data from the geocoding api like in the OP's code. The reason why you can't is that Google doesn't want you to. Same Origin Policy means a script downloaded from a given domain A can't load data from another domain B UNLESS domain B explicitly allows it (by using a particular http header in the response). – matteo Dec 10 '11 at 17:52
1

One would reasonably expect the google maps api to allow cross domain access, which it did until recently. Now it doesn't allow it any more; i guess they allege security reasons but I also guess the real reason is to oblige you to use only their code to get their service. So the only way to get the data via javascript from the client is to use Google's javascript api, which anyway gives you almost the same flexibility as calling the api url directly. – matteo Dec 10 '11 at 17:52

score 4 · Answer 3 · edited May 23 '17 at 12:34

4

Try adding &callback=? to your URL string. It may work.

See this for details > XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

edited May 23 '17 at 12:34

Community

1
1

answered Mar 12 '11 at 06:59

neebz

11,465
7
47
64

2

Unfortunately, it looks like in the latest version of the Google Maps API, this will no longer work. – Pandincus Mar 12 '11 at 07:01

score 1 · Answer 4 · answered Jul 23 '12 at 00:20

I had the same issue. Trying to get json from a server to wich I dind't had access (=> no JSONP).

I found http://benalman.com/projects/php-simple-proxy/ Add the php proxy to your server and do the ajax call to this file.

$.ajax({
   type: 'GET',
   url:'proxy.php?url=http://anyDomain.com?someid=thispage',
   dataType: "json",
   success: function(data){
      // success_fn(data);
   },
   error: function(jqXHR, textStatus, errorThrown) {
      // error_fn(jqXHR, textStatus, errorThrown);
   }
});

where proxy.php (the file from Ben Alman) is hosted in your domain

Alternative (which I found to be second best to this): http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

score 0 · Answer 5 · answered Mar 12 '11 at 06:47

0

Make sure it's not a cross-domain issue. I guess, for jQuery to be able to call other domain URLs, you need to specify the URL in some special format. I don't exactly remember, but maybe the "?" (question mark) appended in the end of URL?

answered Mar 12 '11 at 06:47

Tengiz

8,011
30
39

JQuery won't get json?

5 Answers5

Linked

Related