jQuery $.ajax GET URL and Google geocoding

Question

I have xml file that contains the URLs for geocoding requests to Google. I want to iterate through the file, grab the URL (and later the site name...one step at a time), and send a Geocoding request to Google to get the lat and lng from the response. I am having problems with my $.ajax GET request. Can't the URL parameter just be a value in the array that contains my links? See my code below. Thank you for your help!

$(document).ready(
  function() {

    $locArray = new Array();
    $coorsArray = new Array();

    $.ajax({
        type: 'GET',
        url: 'data.xml', 
        dataType: 'xml',
        success: function(d){


            $(d).find('record').each(function(){

                var $record = $(this);
                var site = $record.find('site_name').text();
                var $maplink = $record.find('maplink').text();


                $locArray.push($maplink);           

             })

             $($locArray).each(
               function() {
                 $.ajax({
                    type: 'GET',
                    url: this,
                    dataType: 'xml',
                    success: function(d) {
                        $(d).find('location').each(function() {
                            var $location = $(this);
                            var $latcoor = $location.find('lat').text();
                            var $longcoor = $location.find('lng').text();
                            var $fullcoors = $latcoor + ", " + $longcoor;

                            console.log($latcoor);

                            $coorsArray.push($fullcoors);
                            //console.log($coorsArray);

                        })

                        $($coorsArray).each(
                          function(){
                            $('ul').append("<li>" + this + "</li>\n");
                          })

                    }
                 })
               }
             ); 



          } 


      });

});

Answer 1

You cannot initiate an AJAX request to a domain other than your own. This is to prevent XSS attacks. See Same Origin Policy.

If you want to get data from Google, either setup a proxy on your own domain which mirrors Google's response or due to request directly on your server.

Also, since you seem to geocode the same list of URLs, why not simply geocode them and cache the result?

Google supported JSONP previously but due to abuse, JSONP support was dropped.

Answer 2

Using the V3 map api this seems pretty simple ... cross domain is not problem since google works with json requests ... here is a snippet from some recent code, it should give you some pointers where to look in the google map api.

var $search = jQuery('input#adresse');
var geocoder = new google.maps.Geocoder();
var Lat;
var Lng;
function addressSearcher(){
    if (geocoder) {
        inprogress = true;
        geocoder.geocode( { 
            address: $search.val()
        },function(results, status){        
            if ( status == google.maps.GeocoderStatus.OK
                 && results.length < 3
                 && results[0].types[0] == 'street_address' ){
                var loc = results[0].geometry.location;     
                Lat = loc.b;
                Lng = loc.c;
                $search.val(results[0].formatted_address);
            }
        })
    }
}