10

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/distancematrix/xml?origins=Affenhausen&destinations=Achenkirch&mode=driving&language=de-DE&sensor=false. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

The Javascript code is as

function distanceCalc(){
    start_location = $('select.start option:selected').val();
    target_location = $('select.end option:selected').val();
    $.get('http://maps.googleapis.com/maps/api/distancematrix/xml?origins='+start_location+'&destinations='+target_location+'&mode=driving&language=de-DE&sensor=false', function(data) {

DreamWeaver works, but when I open it via a browser, I get the same error.

1
  • I am getting this errror in my local ,
    – Hitesh
    Feb 3, 2015 at 10:19

4 Answers 4

10

This is a bit tricky, even if you have CORS set up properly it still fails. You should use Google's build in functions to access it. If you try to access it directly via $.get() or similar it will fail... check this example out: https://developers.google.com/maps/documentation/javascript/examples/distance-matrix

Interesting fact, when accessing via $.get() (I am not sure why though):

-THIS WORKS: http://maps.googleapis.com/maps/api/geocode/

-THIS FAILS: http://maps.googleapis.com/maps/api/distancematrix/

My advice - don't try fetching json/xml via get(). Use google's API build in functions to send request and then parse the response properly

This example code should get you started:

// var origins      = [];
// var destinations = [];

var distanceMatrix  = new google.maps.DistanceMatrixService();
var distanceRequest = { origins: origins, destinations: destinations, travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false };
distanceMatrix.getDistanceMatrix(distanceRequest, function(response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
        alert('Error was: ' + status);
    }
    else {
        var origins      = response.originAddresses;
        var destinations = response.destinationAddresses;
        // rest of your code here...
    }
}
9

Sounds like you have a crossdomain problem because there is no 'Access-Control-Allow-Origin' header in the response. If this is not the case a browser usually does not allow to request a service located on another domain than the javascript that is triggering the request.

Seems like the api you are using is not intended for this approach, maybe this can help: How to make cross-domain AJAX calls to Google Maps API?

-1

seems like you are trying to access others domain from your domain. Its a cross domain issue, ajax is not allowed for this cross domain access either you use json call or server side call.

-1

If you are using angularjs like i was the request should be like this

var req = {
    method:'GET',
    'url:'https://maps.googleapis.com/maps/api/distancematrix/json',
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    params: { origins:attrs.from, destinations:attrs.to }
};
1
  • 5
    No, it absolutely should not. Access-Control-Allow-Origin is a response header, you can't add it from the client. Besides, the code in the question is jQuery, the tags on the question say jQuery; they are not using AngularJS.
    – Quentin
    May 10, 2016 at 8:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.