JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<body>
    <div id="map-canvas"></div>
</body>

CSS

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

JavaScript

var map,
	trafficLayer;
		
function initialize() {
    var myLatlng = new google.maps.LatLng(26.894470, 75.808363);
    var mapOptions = {
        zoom: 15,
        center: myLatlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);	

	trafficLayer = new google.maps.TrafficLayer();
	trafficLayer.setMap(map);		  
}
	
$(function () {
    initialize();
    setInterval(reloadTiles, 5000);			
});

function reloadTiles() {
    var tiles = $("#map-canvas").find("img");
    for (var i = 0; i < tiles.length; i++) {
        var src = $(tiles[i]).attr("src");
        if (/googleapis.com\/vt\?pb=/.test(src)) {				
            var new_src = src.split("&ts")[0] + '&ts=' + (new Date()).getTime();
            $(tiles[i]).attr("src", new_src);													
        }				
    }
}