Google maps traffic card: oops something went wrong with JavaScript

sretlow · January 7, 2020, 2:22pm

Hi,

I have managed to get a iframe card on the screen. I did it by following these steps:

First you have to sign up for their developer program. It’s free if you’re not hammering their server.
https://console.cloud.google.com/google/maps-apis/overview?

Then you have to create some html that you can embed into the card:

gist.github.com

https://gist.github.com/acnicol/a59828ce3c25aa240293de0c2bc4dbe8

traffic.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Traffic Layer</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {

This file has been truncated. show original

Save this to your www directory.

Then create an iframe Lovelace card:
url: /local/traffic.html
aspect_ratio: 100%
type: iframe

When I open the view I see for a short moment the desired card with traffic info. But then it dissapeares and I get a message: Oops, something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

Someone knows what to do? How can I open the JavaScript console for further investigation?

mattlward · January 28, 2024, 4:11am

Did you ever get this working?