jQuery & Google Maps: How To AJAX It

Question

I have a simple task but cannot seem to pull it off. I will have a page that allows the user to enter their address and have Google return directions to a destination. So, step number one was to go to the google maps API and see how this is done. So, from their example, I got the following url:

http://maps.googleapis.com/maps/api/directions/json?origin=Chicago,IL&destination=Los+Angeles,CA&waypoints=Joplin,MO|Oklahoma+City,OK&sensor=false

If you put this url in your browser, you will get a json result. So, my thought was, why can't I call this in a jQuery AJAX request? Is this possible? I have tried the request below but get an 'Access Denied' error in the jQuery script:

        $.ajax({
            type: "POST",
            url: "http://maps.googleapis.com/maps/api/directions/json?origin=Chicago,IL&destination=Los+Angeles,CA&waypoints=Joplin,MO|Oklahoma+City,OK&sensor=false",
            success: function (msg) {
                alert(msg);
            }
        });

Does anyone see a problem with the syntax or know why this doesn't work? And FYI, this is just the first question. I would like for this question to become a great resource for others to create a google map with directions via jquery and ajax without using php (which it seems as though everyone else is using).

timdream · Accepted Answer · 2011-01-24 04:10:04Z

2

In order to do cross-domain $.ajax, the URL given must support JSON-P. The URL you are using only supports JSON.

Edit: I was wrong. You are looking for directions, not Geocoding. I am not sure if there is anything for you in the API library, but you may pock it around.

https://code.google.com/apis/maps/documentation/javascript/reference.html

https://code.google.com/apis/maps/documentation/geocoding/

(Disregard information about Geocoding below)

Google disabled JSON-P callback for Geocoding to prevent abuse. You must use Google Geocoding API library to do the proper request, and the purpose of reverse Geocoding must be to show an address on Google Maps.

answered Jan 24, 2011 at 4:10

timdream

5,9225 gold badges25 silver badges24 bronze badges

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

2 Comments

timdream Over a year ago

I am pretty sure you must use Google Maps API Javascript instead of Directional API since you are working on web app on client-side.

clockwiseq Over a year ago

That's what I figured (I didn't want it to be the case but I did have that gut feeling that it was the cross-domaining that would bite me in the rear). I wanted to have total control over the requests and the responses so that I could handle every event and failure with custom messages but it looks like I will have to use the API. Thanks for the info.

Collectives™ on Stack Overflow

jQuery & Google Maps: How To AJAX It

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related