How to Make Cross-Domain Ajax Calls to Google Maps API

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

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.

Cross-Origin blocking AJAX connection with Google Maps even with the headers seted

You need to specify the headers when the webpage is output to the browser. Not in the ajax request. If your using php you could add sheaders

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");

To set headers in Ruby see this post

Google Maps API GET request failing with cross domain error

Fixed this by writing a simple php file to take care of the GET request. The javascript POSTs to the php script, which then makes the call to Google's API.

How to call google map geocode service with jquery ajax

You will need to contact the API regarding the rules.

$.getJSON( {
    url  : 'https://maps.googleapis.com/maps/api/geocode/json',
    data : {
        sensor  : false,
        address : address
    },
    success : function( data, textStatus ) {
        console.log( textStatus, data );
    }
} );

Edit:

How dumb of me, shouldn't be on stackoverflow in the morning! The problem is a cross-domain request. For security reasons this is not allowed. See: How to make cross-domain AJAX calls to Google Maps API?

Please use Google's own Geocoding client.

How can I use ajax with google map api?

First of all, you have a typo:

url: baseAPIUrl + "origin=place_id:" + placeId[0] + "&destination=place_id:" + placeId[1] + apikey,

It shouldn't be baseAPIUrl += but baseAPIUrl +.

Second of all, you can't access URLs that are outside of your domain (localhost in this case).

Read about this here: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

In short, you'd need to make an ajax request to your server and your server would make a request to google api.

Google geocode API ajax

I build my solution by following this post

My solution using Jquery and google maps class

$("#zipcode").keyup(function() {
    var geocoder = new google.maps.Geocoder();
var address = $(this).val() + ', France';
if (geocoder) {
    geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        for (var i=0;i<results[0].address_components.length;i++) {
            if (results[0].address_components[i].types[0] == 'locality')
            $('#city').val(results[0].address_components[i].long_name)
        }
    }
    });
}
}); 

---

Related Topics