Maps traffic widget?

Apps & Services HABPanel
,
1

Hi,

I would like to have a widget that shows google map at home location with displaying the trafic arround.

I found this possible options:

Tried the first one but of course it doesn’t work :slight_smile:

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
    </style>
 <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: {lat: 34.04924594193164, lng: -118.24104309082031}
        });

        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>

Any one can help to guide me in the right direction?
Cheers!

1 Like
2

Hi,

did you replace API_KEY with a generated Google API Key? I did, but it still didn’t work, too. Storing this code locally as html an opening in a browser does work.

Any ideas or different solutions?

Thanks and best regards,
Marc

3

I am using now bing maps static image which works ok:
https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/12.438640%2C9.197140/13?mapSize=600,280&mapLayer=TrafficFlow&format=png&key=[ApiKey]

This site can help you build up the link:

4

You can also use Waze - just add a Frame widget with an URL like:

https://embed.waze.com/en/iframe?zoom=12&lat=52.50912&lon=13.43456

You have a header and footer button that you can’t remove but it’s better than nothing.
You can go to https://www.waze.com/en/livemap to recenter the map and get a permalink with the coordinates and zoom (button in the bottom-right corner).

3 Likes