google distance matrix on localhost

Question

I am trying to use google distance matrix to find out the distance and time from one source to one destination.

I am calling the function

$('#postCode').change(function () {
    var address = "sydney";
    var source = "melbourne"
    var url = "https://maps.googleapis.com/maps/api/distancematrix/js?units=imperial&origins=" + address + "&destinations=" + source + "&key=MYKEY_HERE";
    $.get(url, function (data) {
        window.alert(data);
    });
});

I just need to get whatever data is returned but the problem is whenever I load the page which has the link

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

or trigger the change in postcode field, it shows in the console the following 2 errors

Google Maps API error: MissingKeyMapError
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:60197' is therefore not allowed
access.

There are two warnings as well

util.js:210 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

util.js:210 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

What am doing wrong, or whats the proper way of achieving the required output (distance and time between two points).

score 1 · Accepted Answer · answered Dec 05 '16 at 23:55

1

Don't use the DistanceMatrix web service from javascript on the client, use the Google Maps Javascript API v3 DistanceMatrix Service.

$('#postCode').change(function () {
    var address = "sydney";
    var source = "melbourne"
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
  {
    origins: [address],
    destinations: [source],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.IMPERIAL,
  }, callback);

function callback(response, status) {
  // See Parsing the Results for
  // the basics of a callback function.
}

});

answered Dec 05 '16 at 23:55

geocodezip

158,664
13
220
245

where do i put the api key then? – Novice Dec 06 '16 at 00:00
In the [Google Maps Javascript API v3 include](https://developers.google.com/maps/documentation/javascript/get-api-key) as you indicate you are already doing. – geocodezip Dec 06 '16 at 00:02
still there are two errors and two warnings warning : no api keys warning: sensor not required error: missing keymap error : this service requires an api key – Novice Dec 06 '16 at 00:21
Sound like 1. you didn't include your API key and 2. you included the (no longer required) sensor parameter in your include. You didn't include enough information in your question, please provide a [mcve] that exhibits your issues – geocodezip Dec 06 '16 at 00:44
Ok, I got it, you are right I was using sensor parameter. Removing it solved the problem. Now it has come up with Api not activated map error. I have regenerated the key but to avail. – Novice Dec 06 '16 at 01:19
Have you activated the DistanceMatrix and the Google Maps Javascript API for your key? – geocodezip Dec 06 '16 at 01:45
I am just fiddling with the keys, projects, and activations. I tried the key in the browser url and it works but not in the code. I tried a new key from a new project on google and now it is working. Thanks. – Novice Dec 06 '16 at 02:46
As stated you have to register and activate the API you want to use with your license key otherwise you will not be allowed to access the calls. – KeyOfJ Dec 07 '16 at 13:22

google distance matrix on localhost

1 Answers1

Linked