Google maps traffic map in an iframe stops updating

Configuration Frontend
1

I am trying to port a Google Maps Traffic page to HA. I created a file in my www directory named traffic.html which contains the following (with my API key redacted of course):

<html>
  <head>
    <style>
      html, body, #map {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initialize" async defer></script>
    <script>
       function initialize() {
          var map = new google.maps.Map(
             document.getElementById('map'), {
                center: {lat: 41.3542756, lng: -73.4849393},
                zoom: 11 ,
                mapTypeId: google.maps.MapTypeId.HYBRID 
             }
          );

          var trafficLayer = new google.maps.TrafficLayer();
          trafficLayer.setMap(map);
       }
       google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

And then created an iframe card in a dashboard panel:

      - type: iframe
        url: /local/traffic.html
        aspect_ratio: 75%

My problem is the panel seems to work initially but does not keep updating. I feel like I’m close, can anyone get me the rest of the way? I’m actually surprised that I haven’t found a prepackaged addon for Google Maps.