You will need Google Maps js api key - documentation - Traffic Layer | Maps JavaScript API | Google Developers
Then on your layout you add new embedded html item like this:
HTML to Embed
<div id="map"></div>
Custom Style Sheets
<style>
#map {
height: 100%;
}
</style>
HEAD content to Embed (including script tags)
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 42.6055556, lng: -83.15},
disableDefaultUI: true
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
function EmbedInit() {
$("#map").height($(window).height());
}
</script>
Obviously you replace the YOUR_API_KEY ,with, well with your google api key.
zoom and center line should be self-explanatory
disableDefaultUI: true
gets rid off ‘pin man’ and zoom UI - you can leave it at false or delete that line if you’d rather see this UI.
effect:
