Make water transparent in the Google Maps API V3

Question

I'm looking to set the "color" of the water to transparent in a way, that the div behind the map is displayed in these areas.

Is there a method of achieving this? I already tried the following, which doesn't work:

"stylers": [
  { "visibility": "off" }
]

it only sets the areas to some kind of nothing-color, but there's no transparency.

Answer 1

The problem is that under the water still is another feature, the landscape.natural.

The following works for me up to zoomLevel 5:

          [{   //hide all fills
              "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "off"
              }]
          }, {//and show the landcover
              "featureType": "landscape.natural.landcover",
                  "elementType": "geometry.fill",
                  "stylers": [{
                  "visibility": "on"
              }]
          }]

It may not be the solution, but it shows that it must not be impossible at all. Maybe you also find some settings for higher zoom-levels.

Demo: http://jsfiddle.net/doktormolle/ME35L/

---

An approach especially for InternetExplorer (works on all zoom-levels).

Define a specific color for the water-feature(let's say #123456) and use the Chroma-filter for all images in the map:

#map_canvas img {
    filter:Chroma(color=#123456)
}

Demo: http://jsfiddle.net/doktormolle/4V5U8/