How to make cross-domain AJAX calls to Google Maps API?

Question

I'm trying to make a jQuery $.getJSON call to the Google Maps Geocoding webservice, but this doesn't work because of cross-domain security issues.

I haven't been able to figure it out online, but I've read a bit about Google Javascript API or JSONP, but so far no clear answer...

Could anyone enlight me?

Thanks!

Solution

I can see no advantage in using the Server-side Geocoding Web Service when Google Maps provides a full featured Client-side Geocoding API for JavaScript.

First of all, this automatically solves your same-origin problem, and in addition the request limits would be calculated per client IP address instead of of per server IP address, which can make a huge difference for a popular site.

Here's a very simple example using the JavaScript Geocoding API v3:

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

<script type="text/javascript">     
   var geocoder = new google.maps.Geocoder();
   var address = 'London, UK';

   if (geocoder) {
      geocoder.geocode({ 'address': address }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0].geometry.location);
         }
         else {
            console.log("Geocoding failed: " + status);
         }
      });
   }    
</script>

If for some reason you still want to use the server-side web-service, you could set up a very simple reverse proxy, maybe using mod_proxy if you are using Apache. This would allow you to use relative paths for your AJAX requests, while the HTTP server would be acting as a proxy to any "remote" location.

The fundamental configuration directive to set up a reverse proxy in mod_proxy is the ProxyPass. You would typically use it as follows:

ProxyPass     /geocode/     http://maps.google.com/maps/api/geocode/

In this case, the browser could make a request to /geocode/output?parameters but the server would serve this by acting as a proxy to http://maps.google.com/maps/api/geocode/output?parameters.

Comments

[Pierre Duplouy]

Thanks, I wasn't aware of the existence of such a class. It solves my problem :)

[wenbert]

@Daniel Vassallo, have you noticed differences in using the API compared to the maps.google.com/maps/place ? I get better results while using that URL. Do you have more information on this part? For example, Google can locate this: bit.ly/9wxOL2 BUT I have tried to locate the same location using the API for a few days now without any success.

[Daniel Vassallo]

@wenbert: Yes I did notice that in a few occasions. I even found some map imagery (both satellite and road maps) to be slightly different from maps.google.com and the Maps API. For example I found one occasion where the border of a whole island is offset by some 100m to the North when comparing the imagery of maps.google.com and the Maps API.

[wenbert]

@Daniel Vassallo, I see. Thanks, But what I am exactly looking for are local businesses in my country (Philippines). It seems that maps.google.com searches also using Localsearch/Places while the API only searches the Maps. Have you tried using Maps V3 API with Localsearch? I just applied for a key in Google Places but I do not know if I'll ever get it. My ideal setup would be Google Maps V3 + Google Places. Have you done anything similar like this?

[Daniel Vassallo]

@wenbert: No not yet unfortunately. I'm looking forward to using Google Places :) However, I wouldn't be surprised if the data is different (or not in sync) between the various APIs.

[wenbert]

@Daniel Vassallo, thanks! I appreciate the reply. I'll probably try to make Maps V3 and Localsearch work while waiting for Google Places. ;)

[Ian Devlin]

The problem with using this method is that you very quickly hit limits to the number of requests you can make, hence the server side is preferable to be able to cache it.

[Tim Vermaelen]

The difference is with the server-side approach I can capture false parts of an address (country + postcode). I can't seem to do that with the client-side approach

[MyUserName]

When calling API directly, it is possible to specify language parameter for each request, which is not possible using client library.

[Admin]

Suggestion: flip the order of your suggested solutions. Using same origin scripts is always preferred for user trust, even if it's a through a proxy than cross origin scripting.