Google maps card with traffic

I have a “good morning” Lovelace view that displays on my bedroom TV when I wake up.

Wife drives to different places every day throughout the city (and can’t get those addresses into HA due to healthcare provider/privacy restrictions).

Would love to get a relatively live view of the city with color-coded traffic conditions from a source like Google Maps. Doesn’t have to update every second; could just update once on the wakeup automation/routine that calls the cast service.

I haven’t been able to turn up much info on this type of thing (from the last few years at least). Curious if anyone has done something similar or has a starting point.

Not sure if you already figured this out but what I did below. Map update every 10 seconds
Open a web browser and type traffic in Google search. There will be a Google map for traffic.
Right click and copy the image URL link to that image.
On HA, install generic camera integration and use the URL for the image to create the generic camera device.
In the dashboard, I use picture entity card for the map.

1 Like

@NavNav could you share the generic camera config, iv tried a few times to set this up and keep getting failed to connect error. thanks

Hello, I just made an account to try and help with this post!

I was just looking to try and copy this and I think I found a way of getting the image to display. If you copy the image address you can paste that into a picture card. You can see the image but I am not sure if this updates so I’ll check later to see if this works.

Looking around, I found this other solution. It’s a little more information as there is a search box and some links at the bottom but it is another way of getting the job done. Here is a brief explanation to get a live traffic map of a set area based on that post:

  • Search for the center location in Waze.
  • Hit the share button.
  • Go to the embed tab.
  • Copy and paste only the link part of the embed into the Webpage card.
  • Edit the size of the map with the size var in the link.
  • There you go!

You could do something similar with Google Maps but their links are a bit harder to edit.

I am having issues with the pasting the link. I keep getting this error.

Looks like you enter the wrong or incomplete url. did you right click and copy the “copy image address” ?
you can test the image by paste it on a new browser tab. If it didn’t show the image then it’s wrong.

@NavNav Thanks for this! Your method was the first one I found that uses Google map data instead of the Waze iframe method. When I right click and copy the image link, the generic camera integration gives me a warning about relative paths not being allowed.
It seems the link I am generating by copying the image link is different than the one showed in your screenshot. Do you have any idea what I’m doing wrong?

image

I used my Android phone to get the url, as the browser of my laptop gave the same result, using the browser of your mobile phone works. Well at least for me.

Can I ask what browser you used?
When I use either Firefox or Chrome on my iphone. It gives me an “invalid URL” warning.

I have an Android phone and both the default browser and chrome browser work for me.

I went to google.nl
typed in the searchar traffic rotterdam
hit the search button

then did a right click on the image with the traffic and opened it in a new tab

and then I was able to copy the full url.

But I am using Android not IOS

Hope this helps.

For anyone interested I managed to get the google maps with driving times embed using the standard Webpage card. The issue is the URL used from google maps. On maps.google.com there is a share button, using that gives you a Diaglog with a tab option to embed a map. Use the URL in iframe code, it works within the iframe on the webpage card . The url looks like https://www.google.com/maps/embed?

Hope this helps

1 Like

Were you able to get the embeded map to display traffic data?

1 Like

Yes, follow @svptje just above.

I wish there was a way to slect larger and more zoomed out but I have not been able to do so.

Good luck.

Sorry, this isnt working for me, not sure what I’m doing wrong. All I get when using the link is the basic map devoid of traffic data.