<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 {

        height: 100%;

      }

      /* Optional: Makes the sample page fill the window. */

      html, body {

        height: 100%;

        margin: 0;

        padding: 0;

      }

    </style>

  </head>

  <body>

    <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=YOUR_API_KEY&callback=initMap">

    </script>

  </body>

</html>