Issue using jQuery to do a google maps api call (JSON not being returned)

Question

This is the code I was originally using and worked perfectly fine up until yesterday (which is when I noticed it but I am unsure when it actually stopped working for sure). I know this was working at the beginning of last week so sometime between then and yesterday it broke. I am running this code within a RAD called Alpha Anywhere but have tested it outside of this program (in just a HTML page) and it still didn't work. Hoping someone knows if there is a bug or if there is something I can do to fix this issue. I ran this in firefox with firebug on and that is where I saw the error letting me know that the JSON wasn't retrieved.

var $jq = jQuery.noConflict();

$jq.getJSON('http://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&sensor=false',function(results){

    // I have code in here to calculate miles driven per state 
    // (as in the above code origin and destination would be filled 
    // with variables but I went with this basic call because even this doesn't work).

});

This following code does not work (as of right now November 11, 2013 at 10:26 PM CDT) when running it in firefox or chrome. With firebug on it shows I am not getting a response from google. However this following code does respond when ran in safari 7.0.x on Mac OSX 10.9.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://api.jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"></script>
        <script>
            function getData() {
                var url = 'http://maps.googleapis.com/maps/api/directions/json?origin=Huntsville,AL&destination=Atalanta,GA&sensor=false';
                var $jq = jQuery.noConflict();
                $jq.getJSON(url, function (results) {
                    alert(results.routes[0].legs[0].distance.value);
                });
            }
        </script>
        <title>jQuery Debug of Google API</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <button onclick="getData();">click</button>
    </body>
</html>

It looks like the url is commenting out the rest of the code. I'd bet you need to put quotes around it. — KyleMit, Nov 05 '13 at 16:30
I apologize for that mistyping, my code has the url properly quoted. Thank you for pointing this out on here so I could get that fixed in my question. Anyone else having this same issue using jQuery and the google maps api? — Jmo, Nov 05 '13 at 22:47
Solved It! It was a combination of not requesting JSONP and not being served it once it was requested. — KyleMit, Feb 02 '14 at 03:30

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

There are a couple problems here:

First, from jsonp explained:

As you may be aware you cannot directly load data files from another domain. This is a security issue that has been around for a long time and is commonly solved by sharing data through an API, REST or such. However there are ways around this ... [for example] JSONP

To do this in jQuery:

Using $.ajax, add dataType: 'jsonp', which appends callback=? to the URL
Using $.getJSON (shorthand for .ajax), add callback=? at the end of the requested URL.

That indicates that we want to use JSONP. Remove it and a vanilla JSON request will be used; which will fail due to the same origin policy.

Another issue is that some external APIs (like Google Maps Directions API), don't automatically serve JSONP. If the server doesn't know what to do with the callback parameter then the response from the API will still be JSON, not JSONP. In order to ensure the returned content is formatted correctly, you can go through a proxy server like the jsonp.guffa.com

To use it, change the request to http://jsonp.guffa.com/Proxy.ashx?url=YourEncodedURI
Where you have replaced YourEncodedURI with the encoded requested url string.

Putting it all together:

var mapsUrl    = 'http://maps.googleapis.com/maps/api/directions/json' + 
                 '?origin=Toronto&destination=Montreal&sensor=false';
var encodedUrl = encodeURIComponent(mapsUrl);
var proxyUrl   = 'http://jsonp.guffa.com/Proxy.ashx?url=' + encodedUrl;

$.ajax({
    url: proxyUrl,
    dataType: 'jsonp',
    cache: false,
    success: function (data) {
        console.log(data);
    }
});

Issue using jQuery to do a google maps api call (JSON not being returned)

1 Answers1

Putting it all together:

Working Demo in jsFiddle

Linked