How to store all of the GMaps tiles locally for a finite area, and display them

I want to make an html5 app for mobile devices, where one of the features is a Google Map. I am able to do this using the regular apis embedded in html5 in the normal way.

However, for the next version I want something more particular. Instead of the user being able to view anywhere in the world at any zoom, I want to restrict it to view only inside, say, a 20 km rectangle around a particular loca开发者_如何学JAVAtion, for, say, only 4 levels of zoom. i.e. there is only a small finite number of tiles that ever need to be used. Also since there is a limited area and a small finite number of tiles, I want to download absolutely all the tiles for every zoom level when the html5 app first opens, and store them locally. This would allow a user to look around inside this 20 km rectangle, and zoom, pan, etc, and the loading would be lightning-fast. (i.e. it would not be fetching new data from GMaps' servers each time you change zoom or pan--instead all of that data would be stored locally (downloaded when the app is run for the first time) and simply displayed as the user navigates around. How do I do this?

Also if there is a non-Google-Maps solution I am interested in that too.

Thanks

Would this article by Drew McLellan on 24ways help you out in any way?

http://24ways.org/2010/finding-your-way-with-static-maps

That would be breaking the Terms of Service. You are not allowed to download/cache tiles.