title: Refreshing Google Maps API V3 Layers
body: <p>I've been having trouble getting Google Maps API v3 to update correctly.  I've got a javascript timer running that <em>should</em> be refreshing the traffic layer periodically but I'm not seeing it happening.</p>
  
  <p>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: <a href="https://developers.google.com/maps/documentation/javascript/reference#TrafficLayer" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/reference#TrafficLayer</a>).</p>
  
  <p>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.</p>
  
  <p>I've tried several things, to include:</p>
  
  <ul>
  <li>Using meta tags to disable caching: <a href="https://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-off-caching-in-all-browsers">Using &lt;meta&gt; tags to turn off caching in all browsers?</a></li>
  <li>Using a manifest file: <a href="https://stackoverflow.com/questions/18487986/how-to-prevent-google-maps-api-v3-from-caching-tiles-to-save-storage-space">How to prevent Google Maps API v3 from caching tiles (to save storage space)?</a></li>
  <li>Disabling Chrome's browser caching (while keeping the dev tools open): <a href="https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development">Disabling Chrome cache for website development</a></li>
  <li>Firing another event to refresh the layers: <a href="https://stackoverflow.com/questions/7659072/google-maps-refresh-traffic-layer">Google Maps refresh traffic layer</a></li>
  <li>Completely re-initializing the map every timer event.</li>
  </ul>
  
  <p>Is there a way to ensure the browser will render the new images without forcing a full page reload?</p>
  
  <p>Below is a simplified version of the page (based off of the answer from <a href="https://stackoverflow.com/questions/7659072/google-maps-refresh-traffic-layer">Google Maps refresh traffic layer</a>).</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Map Testing&lt;/title&gt;
          &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=weather"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              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);
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body style="margin:0px;"&gt;
          &lt;div id="map" style="width:100%; height:100%;"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>