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

Answer 1

Not possible!

Google map CDN URLs have dynamic nature,

• https://mts0.googleapis.com/vt?pb=!1m4!1m3!1i8!2i234!3i15...
• https://mts1.googleapis.com/vt?pb=!1m4!1m3!1i8!2i233!3i155!!...

No wildcard characters are allowed in CACHE section of the HTML5 cache manifest files

We can not have some thing like,

CACHE MANIFEST
/css/style.css
/js/libs/modernizr-2.0.6.min.js
/js/libs/jquery-2.1.4.js
http://mts0.googleapis.com/*
http://mts1.googleapis.com/*
http://fonts.googleapis.com/*
NETWORK:
*

Answer 2

I had a google map project that I needed offline. I found Bing Maps (https://www.bingmapsportal.com/ISDK/AjaxV7) is much better offline and switched my project over to that and I'm happy. I ran the google and bing version side-by-side in offline mode and Bing was great. Whereas google would immediatey fail on tile loads, Bing maps cached more tiles and appeared to even resize zoomed tiles to at least give you something in offline mode.

I know the question here is about Google maps; but if you don't care about bing vs. google and really just need offline support, I'd highly recommend trying Bing maps. It solved it for me.

Answer 3

I have http://maps.google.com/maps/api/js?sensor=false in the CACHE section of cache.manifest, together with my application files and there isn't any problem.

Although, I believe you also have to cache other files that the Google Maps API requests. You can take a look at the files downloaded by your app and include them.

Answer 4

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.