How to add an overlay map above default Google map?

Question

Just to be clear from the start, I've never used Google maps in any of my programs/projects, so I have a little knowledge on this matter. Also, I found some other posts in SO about Google maps, but I'm not sure if any of these really helps in my situation.

What I want to do is add another map above the already existing Google map. The new overlay map would have some degree of transparency in order for the original Google map to be visible too. Something like this: http://crf.casa.ucl.ac.uk/screenRoute.aspx?s=386&d=105&w=False

How can I do this? What technologies should I look into? I'm a Java developer, but any answer in any language would be really helpful.

Answer 1

I suggest downloading the open-source tool MapTiler (for Windows and Mac OS X).

You would have to use the GMapType object to define your own custom map. MapTiler will automate the tiling process for you, and in addition, once the tiling process is finished, it will generate a simple HTML viewer. It will also include a custom control to change to opacity of your overlay from 0 to 100%.

Custom Map Tile Overlays are quite an advanced topic in the Google Maps API (even the documentation will warn you in red about this). However, I am sure you will be able to use and understand the deliverable HTML viewer of MapTiler.

The following is a sample of what MapTiler is able to produce (note the opacity slider on the top-right):

• Grand Canyon: USGS DRG overlay for Google Maps & Google Earth

Answer 2

It depends on how detailed/large the overlay needs to be. MapTiler is fantastic if you need to be able to zoom in to a very detailed overlay, but if your overlays don't need to be quite so huge, I'd recommend using a GGroundOverlay. It would be pretty easy to change dynamically. Here is Google's demo.

As far as MapTiler goes - if you have a set of overlays you want to change dynamically, you can generate the tiles for all of the overlays, and then easily switch between them. But if you're creating the overlays dynamically, you'll probably need to implement a tile server. Check out Mapnik and TileCache.

Answer 3

I recommend another easy solution: OpenLayers.

See: http://openlayers.org/dev/examples/

Filter for "google", open link in new windows, and look how simple the code is.

OpenLayers is JavaScript API (which can be used instead of Google's API), but it can use many layers. You can mix:

• google maps
• vector objects
• raster images
• WMS objects - GeoServer, MapServer, Mapnik tiles (like these from OpenStreetMap)