Google DistanceMatrix API

Question

I'm trying to get the direction_in_traffic, which isn't returned using the regular directions api. I've found that there is a field in the distancematrix api that does just that.

This code works when I run it from my own machine, but once it is online, I see errors concerning Access-Control-Allow-Origin

var durationInTraffic = function(from, to, mode, callback) {
  var key = 'API-KEY';
  var address = 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=' + from + '&destinations=' + to + '&key='+ key +'&travelmode=' + mode + '&departure_time=now';
  var req = new XMLHttpRequest();
  req.addEventListener('load', function(){
    if (typeof callback === 'function') {
      callback(JSON.parse(this.responseText).rows[0].elements[0].duration_in_traffic.value);
    }
  });

  req.open('GET',address);
  req.setRequestHeader('Access-Control-Allow-Origin','https://haroen.me');
  req.setRequestHeader('Access-Control-Allow-Headers','X-Requested-With');
  req.send();
};

I've created the key, but at the domain verification tab it seems to "forget" what addres I've put in.

jsbin (which obviously won't work since this key isn't allowed on that domain, but I get the same error on my own domain).

The full code I'm trying this on is visible at https://github.com/haroenv/maps-checker

Thanks for your help!

May want to hide your API key if it's linked to your actual google dev account. — Vlad, Dec 02 '15 at 20:02
you might want to change your key, lots of sites suck up SO posts/revisions (as clicking "editied ... ago" does). also, you should not set CORS headers from client-side JS, those are server response headers. — dandavis, Dec 02 '15 at 20:13
@dandavis so is it not possible to use the distancematrix api from a client side then? The `setRequestHeader` I tried didn't actually change anything leading me to believe the error is somewhere else — Haroen Viaene, Dec 02 '15 at 20:16
from what i could tell from the docs and sample URLs, that API does not seem to support CORS or JSONp, so you'll need a "proxy". — dandavis, Dec 02 '15 at 20:23
@dandavis what do you mean by that? Would it be creating a server-side api that "mirrors" each request to google? — Haroen Viaene, Dec 02 '15 at 20:27
yeah, you ajax your php server and the php talks to the 3rd-party api. this lets you hide keys, bypass CORS, cache, authenticate, etc. — dandavis, Dec 02 '15 at 20:29
Aha, that sucks, but thanks for your help! If you'd write this in an answer I'd accept it @dandavis — Haroen Viaene, Dec 02 '15 at 20:32

score 0 · Accepted Answer · answered Dec 08 '15 at 09:12

So as @dandavis suggested in a comment, the reason why this didn't work is because Google wants this response to be server-side. My workaround is as follows: a php (or any server-side solution) that mirrors the request to Google. An example implementation is this:

<?php
echo file_get_contents('https://maps.googleapis.com/maps/api/distancematrix/json?origins=' . urlencode($_POST['from']) . '&destinations=' . urlencode($_POST['to']) . '&key='. urlencode(json_decode(file_get_contents('config.json'), true)['maps-key']) .'&mode=' . urlencode($_POST['mode']) . '&departure_time=now');
?>

And then I send a request to that script from within my main client-side script.

Google DistanceMatrix API

1 Answers1

Linked