Google Map API 3 + WMS

Question

Can somebody give me best idea, how to put WMS layer over Google map I have so many layers and so many styles. I research on so many Q and A at StackOverflow, but I didn't get the point about how to manage multiple styles and layers. I would like to put into my JQuery code.

Answer 1

There is a great example on this here: http://www.sumbera.com/lab/GoogleV3/tiledWMSoverlayGoogleV3.htm

Here you have 2 kinds of layers:

1. base layer which is in the bottom
2. overlayed semi-transparent layer which is above all other layers

(note: in the above example they use WMS just for case 2, but you can of course use it also for 1, as the interface (object google.maps.ImageMapType) is the same for both)

Basically, to add "base layers" you use:

map.mapTypes.set('OSM', new google.maps.ImageMapType({ ... }));

To add overlayed layer you use:

map.overlayMapTypes.push(new google.maps.ImageMapType({ ... }));

To add layers to map type control you use option when creating the map:

mapTypeControlOptions: {
    mapTypeIds: [
        'OSM', 
        google.maps.MapTypeId.ROADMAP, 
        google.maps.MapTypeId.SATELLITE, 
        google.maps.MapTypeId.HYBRID, 
        google.maps.MapTypeId.TERRAIN
    ],
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

The above example illustrates this greatly. As for the styling of the WMS layers, this is pretty complex, I also put a question about this here. Good luck!