Reconstruct/Cache google map with tiles for offline personal use

im going to drive my car to some inhabitable place where there is no internet and without a good map It would be dangerous. I would like to have google map with me all the time, but problem = it's not cache-able.

Therefore I need to put these image tile on my laptop, and may开发者_高级运维be use iphone/laptop to view it.

I have started with download the some of map tiles into harddrive with my own filename, for example:

gmap_z12_x234_y434.png is a google map zoom level 12, x=234 y=434, 256x256 pixel tiles.

I have also roughly worked out the Mercator map projection. (i.e. given a GPS geo coordinate, I know which tile and it's neighbor to pickup)

Question (javascript + HTML + css way): How do I reconstruct a webpage view? that can have the functionality like google maps? (zoom in/out, drag, pan ...)

Should I do my own js, html and css stuff? openlayers support this? Has another done it before?

Answer any question will be very helpful for me, thanks in advance!

The licensing terms for Google Maps forbid local caching. I'd recommend openstreetmap.org as an alternative and in particular the oMaps iPhone application, if you have such a device. It has excellent offline support.