Commute time Map tile generator

Tedis_Agolli · February 27, 2020, 3:38am

Hey everyone!

I made a utility to generate a map tile that shows your commute time and updates on a set interval. It uses the Google Maps API so you’ll need an API key.
Example

Hope it’s helpful!

James · February 27, 2020, 2:40pm

@Tedis_Agolli, thanks for sharing, and that looks awesome!

James · February 27, 2020, 2:50pm

@Shai_Dotan, you might be interested in checking this out. I remembered you were interested in getting traffic map/estimated commute time but Bing map doesn’t support traffic in your area.

Shai_Dotan · February 27, 2020, 3:10pm

@James, this only generates a small badge with estimated time to destination. If this can help to generate a traffic map like you did in Bing it will be more useful for me…
Thank you for sharing…
Shai

Chris_C · February 27, 2020, 3:32pm

Nice work, Tedis! I got it working and figured I would post a few notes on here on the steps I had to take.

I got a Google Maps API Key here: https://cloud.google.com/console/google/maps-apis/overview

It had me register and create a ‘project’, then I was able to select Distance Matrix API to get a key. I had to poke around a bit to figure out where to get the key.

It wasn’t working for me at first and I couldn’t figure out why. After reading through a few posts online, I realized that you have to Enable Billing on ‘project’ that was setup to get the API Key. I was reading that there’s a free tier for the maps API, but I can’t find the details on it. I’m going to try it out with a really long refresh interval for now.

One request - it would be nice if we could drop the label part completely.

Tedis_Agolli · February 28, 2020, 1:56am

I made a change that allows you to remove the label. Just leave it empty and it should work!

Justin_Leonard · April 9, 2020, 8:12pm

Nice! Thanks for sharing. Is there a way to selectively hide the tile? Say at certain times of the day (when you are already at work…)? Also, it would be great if there was a way to show the Route Summary info, so you know which route to take. To really work for my desired use case, in which i want to selectively display this only if my secondary route is X mins faster than my more reliable primary route, I think I’ll need to code it myself. I don’t suppose you have this code on github somewhere by chance as a starting point for me to work from?

josh · April 9, 2020, 9:45pm

Just an update (so Tedis is aware too), I posted a sample project to your original thread that I think covers most of the requests:

The badge generator by @Tedis_Agolli runs in your browser, so you can either use your browser’s developer tools (F12) or check his GitHub:

github.com

TedisAgolli/tedisagolli.github.io/blob/master/assets/commute/script.js

function displayUrl(form) {
  let origLatLong = document.getElementById("origLatLong").value.trim();
  let destLatLong = document.getElementById("destLatLong").value.trim();
  let apiKey = "API_KEY_HERE";

  let googleParams = new URLSearchParams({
    origins: origLatLong,
    destinations: destLatLong,
    key: apiKey,
    departure_time: "now",
    mode: "driving",
    units: "imperial"
  }).toString();
  let googleMapsBaseUrl =
    "https://maps.googleapis.com/maps/api/distancematrix/json?";
  let googleMapsUrl = googleMapsBaseUrl + googleParams;

  let shieldsVisualParams = {};
  let label = document.getElementById("label").value;
  ["logo", "color", "style"].forEach(e => {

This file has been truncated. show original

Dev_SS · January 16, 2021, 3:30pm

Did you ever find a free tier? Or did you have to pull in your billing info for the Maps API. I believe I looked into this a while ago and stopped short because of the billing.

Chris_C · January 16, 2021, 10:54pm

I put in my billing info. Haven’t been charged since I guess everything I use falls under the free tier, but I also don’t have the tiles refresh very often and they are on a sub dashboard.

cmderden79 · May 28, 2021, 7:53pm

Can anyone confirm the free aspect? I believe I did the same as @Dev_SS and stopped once I read the billing account was required. Also thought the generic maps API (without traffic) did indeed have a free tier, but the distance matrix did not. Hate to set this up only to tear it back down.

Justin_Leonard · May 28, 2021, 8:25pm

It’s indeed free in practice. Google gives you $200 a month I think, which is more than enough to keep it free.

cmderden79 · May 28, 2021, 8:28pm

Yeah that is what I was reading on. Have you used this tool? When I enter the lat/long and click generate it doesn’t appear that anything happens. The URL that is filled when clicking the link does not change so I am curious if this is still up and running.

Justin_Leonard · May 28, 2021, 8:35pm

I just fiddled with it a year or so ago. I think it worked then. I now use an app I developed for Hubitat. It uses the Google APIs too.

cmderden79 · May 28, 2021, 11:54pm

Can you confirm is Ted’s badge generator is no longer functional? Feel like I am doing everything correctly (input long/lat for both and assign label, then generate…nothing happens). Hoping someone better at this can confirm through a test.

If so is there an alternative to achieve something similar? I am hoping to pull commute time, if not commute time and traffic map. I did look at your proof of concept here but not sure if that is something I could do (I did get a google API).

Tedis_Agolli · May 30, 2021, 11:51pm

Hey! I moved the generator to a new website and accidentally broke it. Should be fixed now.

cmderden79 · May 31, 2021, 12:07am

Thanks for the update. Will give it a try now.

cmderden79 · June 1, 2021, 4:02pm

Thanks again Ted. The generator does indeed update now (label changes appropriately, etc). However, the time field comes back as “no response” (both with using embedded API, or changing manually). I checked on Google Cloud Platform for the API’s requests stats and it does show 8 errors requested against that API, all 4xx client side error types. I double checked my lat/long (entered in format 33.1311793,-97.0263904 for my origin) and currently have the key unrestricted using Distance Matrix API.

Do you think this is still something in the generator’s new link that may be broken, or is this on my side? FWIW this is my first crack using an API so could definitely be missing something here.

Tedis_Agolli · June 1, 2021, 5:10pm

I just tried inputting your example (lat, long) with another random one and I see the time correctly. My only guess would be some issue with your API key?
This is where I got my key from (the actual key is hidden to the right). Make sure there are no restrictions.

The actual errors you see would be useful. A 403 would mean it’s definitely a key issue.

cmderden79 · June 1, 2021, 6:58pm

Thanks again - figured it was something on my side. Didn’t complete the billing setup all the way through. Got it handled and works perfect.