I am using google maps v3 in a new website I am creating and I want to be able to display the sea color as white or transparent. I cannot see how to do this so if anyone knows I would appreciate the help.

By the way, the google map is of country: Ireland

I am using google maps v3 in a new website I am creating and I want to be able to display the sea color as white or transparent. I cannot see how to do this so if anyone knows I would appreciate the help.

By the way, the google map is of country: Ireland

• javascript
• html
• google-maps

3 Answers 3

Using the Google Maps API v3:

[
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [
        { invert_lightness: true },
        { hue: "#ff003b" },
        { saturation: -100 },
        { lightness: 100 } /* generates "white" color */
    ]
  }
]

Use the following tool to assist in styling maps:

http://gmaps-samples-v3.googlecode./svn/trunk/styledmaps/wizard/index.html

You can style your map with the Styled Maps Wizard

When you are done you can export the changes via the Show JSON button at the bottom right. Finally, pass the resulting JSON to your map:

var map = new google.maps.Map(container_element, {styles: your_exported_settings});

Or if you need to change an existing map instance:

map.setOptions({styles: your_exported_settings});

You can also check out the Google Maps JavaScript API V3 Styling guide

You have also a wizard to know how it will work with your stylers there :
Stylers Wizard Google Maps
You can click on Show JSON to see the code ! Have fun ;) !