16

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!

David Pfeffer
  • 38,869
  • 30
  • 127
  • 202
  • possible duplicate of [How to cache Google map tiles for offline usage?](http://stackoverflow.com/questions/6109369/how-to-cache-google-map-tiles-for-offline-usage) – givanse Oct 29 '13 at 17:02

3 Answers3

12

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

enter image description here

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

Manuel van Rijn
  • 10,170
  • 1
  • 29
  • 52
6

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.

crockpotveggies
  • 12,682
  • 12
  • 70
  • 140
  • One can slap just `NETWORK:\n*` (\n means new line) and list all cacheable contents before NETWORK section. Edit: Oh I see someone misunderstod the NETWORK section, it's meant for files not being cached at all. URLs can be listed in list above also. – Ciantic May 25 '13 at 20:35
  • Yea, The NETWORK section specifies the files that should never be cached, and will not be available offline. You can white-list specific URLs here, or simply "*", which allows all URLs. – Mithun Sreedharan Jul 08 '15 at 06:45
5

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/
Will
  • 94
  • 1
  • 2
  • 2
    The correct way of dealing with this would be to edit the previous poster's answer if it can be corrected without major edits. Otherwise, you should comment on the previous post, possibly downvote it, and then provide a correct answer. Answers should be self-contained, not comments on other answers. – Richard Mar 25 '14 at 22:27
  • Your suggestion is reasonable but unfortunately cannot be followed by a user with an insufficient number of upvotes. As a reader I value correct information more than its precise whereabouts on the page, hence took the only option available at the time. – Will Dec 29 '18 at 18:18