Google Maps v3 - Map tile caching on client?

Question

I'm using Google Maps JS API v3 for a project. Is there a way to ask the map to cache tiles on the client's machine so that when they refresh the browser, the tiles don't have to all download again?

Many of my clients are on cellular connections where redownloading the map takes a considerable amount of time.

Thanks!

Answer 1

This is actually possible with HTML5 and its cache-manifest feature. I'd suggest this question (and answer) be updated.

Google coders themselves have tackled this problem and unfortunately the information isn't well disseminated.

Required Readings

1. First take a look at the Google Code blogpost here: http://googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html
2. Then have a read at Missouri State's own post: http://blogs.missouristate.edu/web/2010/05/12/google-maps-api-v3-developing-for-mobile-devices/

The Technique

• You must cache every URL used by Google Maps
• Employ methods to battle Chrome's and Firefox's stubborn caching methods by removing it from "offline websites"
• All customizations must be client-side in javascript

Your cache file will look like (as per Missouri State):

CACHE MANIFEST
/map/mobile/examples/template.aspx
/map/mobile/examples/template.css
/map/mobile/examples/template.js
NETWORK:
http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/

Caveats

You will need to be entirely HTML5-based and recognize the impacts this will have on your users. This situation is handy where either your users are up-to-date on browser standards/devices or you have control over user choices.

Hope this helps.

Answer 2

By default google maps return's cached images (you can see this in the network tab of the console).

If you user's having trouble caching the images, it's probably because they disabled the cache

Answer 3

The previous answer re the cache-manifest feature is incorrect. If you read the spec at http://www.w3.org/TR/html5/offline.html, under "5.7.3 The cache manifest syntax" you'll see that the NETWORK section of the manifest file actually lists resources that should NOT be cached:

# here is a file for the online whitelist -- it isn't cached, and
# references to this file will bypass the cache, always hitting the
# network (or trying to, if the user is offline).
NETWORK:
comm.cgi

The previous poster's example is actually saying:

1) cache the following files:

/map/mobile/examples/template.aspx
/map/mobile/examples/template.css
/map/mobile/examples/template.js

2) fetch the following from the network:

http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/