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®ion=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®ion=GB, or would that be a bad move?
(Sorry for this rather beginner question, let me know if I can explain better!)
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
- First take a look at the Google Code blogpost here: http://googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html
- 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.
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.
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:
*
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.
