Question

I know this question has already been asked and answered, but it didn’t help me.

Here is my jQuery code:

var gmapsurl = 'http://maps.googleapis.com/maps/api/distancematrix/json?'+
                            'origins='+addr_origin+
                            '&destinations='+addr_destination+
                            '&mode=driving&language=hu&units=metric'+
                            '&key='+mykey+
                            '&sensor=false';
$.getJSON(gmapsurl, function(data) {
    alert( 'OK' );
});

Now I get Origin (my site url) is not allowed by Access-Control-Allow-Origin. error message in browser. But if I write this url directly into the browser, then I get a JSON structure.

How can I fix this?

Answer 1

You should use the Google Maps API for geocoding:

var geocoder = new google.maps.Geocoder();
var geocoderRequest = { address: "MountainView, CA" };
geocoder.geocode(geocoderRequest, function(results, status){
//do your result related activities here, maybe push the coordinates to the backend for later use, etc.
});

Instead of calling the service via JSON.
You should, of course have this included in your scripts to use Google Maps API:

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