html - Using Google Maps V3 offline, e.g. with cache-manifest?

Question

I'm writing an HTML5 mobile application that uses Google Maps V3 with a custom layer of OpenStreetMap tiles.

The OSM tiles (from tile.openstreetmap.org) are set to cache for just over 24 hours, and I'm using a cache-manifest for all my HTML/JS/CSS.

So the application could in theory be used offline, except the Google Maps interface isn't happy when offline.

It always wants to call to the Google Maps server at http://maps.google.com/maps/api/js?sensor=false&region=GB - when this fails, Google Maps fails to load.

Is there any way to use Google Maps V3 API offline?

Could I cache-manifest http://maps.google.com/maps/api/js?sensor=false&region=GB, or would that be a bad move?

(Sorry for this rather beginner question, let me know if I can explain better!)

Answer 1

Google coders themselves have tackled this problem and unfortunately the information isn't well disseminated. But yes you can use cache-manifest to do exactly what you've described.

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.