Question

I have a custom map with custom map tiles I’ve created for a website. Whenever I update these map tiles and deploy them to the site, I need my users’s to clear their cache of the old tiles so that they download the new tiles instead.

Since the map tiles are loaded by JavaScript, you can’t simply force your users to get new files with a SHIFT-Refresh.

The only method I can think of so far is to change the folder name that the tiles are loaded from. Something like:

tiles-20121125  <--- todays date

So every time the tiles are updated, I simply change the folder name to a new name, forcing the visitors to download new tiles.

Is there a better way? Something built into the Google Maps v3 API maybe?

Answer 1

Browsers cache the image data based on the requested url, which is as well as the ajax cache.
Google Maps API doesn’t offer any methods to do that.

So the most easiest way, you can append the version as query parameter.

function getTileUrl(point, number) {
  return "http://your.server.com/tiles/" + point.x + "_" + point.y + ".png?v=20121125"
}

Then Google Maps API loads image data from the URL.
The mechanism to load the image might be:

var img = new Image();
img.src = tile_url;

Something like that.
(Actually Google Maps API uses canvas tag instead of Image recently)