I've been having trouble getting Google Maps API v3 to update correctly. I've got a javascript timer running that should be refreshing the traffic layer periodically but I'm not seeing it happening.
As I understand the documentation, I should be able to say something like "layer.setMap(null);" followed by "layer.setMap(map);" to refresh the layer (source: https://developers.google.com/maps/documentation/javascript/reference#TrafficLayer).
I know the new map tiles are being downloaded (for example, I can see them in the Resources section of Chrome's dev tools), but the browser isn't rendering them. There is probably something fundamental I'm missing.
I've tried several things, to include:
- Using meta tags to disable caching: Using <meta> tags to turn off caching in all browsers?
- Using a manifest file: How to prevent Google Maps API v3 from caching tiles (to save storage space)?
- Disabling Chrome's browser caching (while keeping the dev tools open): Disabling Chrome cache for website development
- Firing another event to refresh the layers: Google Maps refresh traffic layer
- Completely re-initializing the map every timer event.
Is there a way to ensure the browser will render the new images without forcing a full page reload?
Below is a simplified version of the page (based off of the answer from Google Maps refresh traffic layer).
<html>
<head>
<title>Map Testing</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var map,
trafficLayer,
mapTimerHandle;
$(function() {
initMap();
mapTimerHandle = setInterval(refreshMap, 15000);
});
function refreshMap() {
trafficLayer.setMap(null);
trafficLayer.setMap(map);
}
function initMap() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {zoom: 15, center: new google.maps.LatLng(40.7127, -74.0059)});
trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
</script>
</head>
<body style="margin:0px;">
<div id="map" style="width:100%; height:100%;"></div>
</body>
</html>
