Convert a single large image overlay to tiles for Google Maps

Question

I have a large high-resolution image that I am using for an overlay using Google Maps v3 API. This works fine for desktop and laptop computers with a reasonable network connect

Answer 1

You can do the entire thing clientside without tile pre-cutting

See https://github.com/Murtnowski/GMap-JSlicer

slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();

Very simple.

Answer 2

There's a really good video tutorial on making maps with maptiler, which can be found here:
Mobile Maps That Aren't Terrible

It focuses on mobile maps, but also covers maptiler and other basics. I found that very helpful.

Answer 3

you can check MapTiler http://code.google.com/p/maptiler/. It can generate the tiles you need.

Tile server is really easy to write. The easiest way is just to host static files (your tiles) in a directory structure. The directory structure is then usually servername/zoom/x/y.png (or zoom/y/x.png). Such structure is also produced by MapTiler. MapTiler also generates an example web page using the tiles (but I guess it uses Google Maps API v2).

Information about using your tiles in Google Maps API v3 can be found here: http://code.google.com/apis/maps/documentation/javascript/maptypes.html#CustomMapTypese