Applying custom Google map style in OpenLayers2?

Question

Recently I stumbled upon this interesting article showing potential of adding custom styles to Google Maps. Some examples of styled maps can be seen here and you can design your own from scratch here.

I'd like to apply 'greyscale' theme to my OpenLayers base map:

Style description according to Google demo would look somehow like:

var styles = {
  'Greyscale': [
    {              
      featureType: 'all',
      rules: [
        {saturation: -100},
        {gamma: 0.50}
      ]
    }
  ]
}

My Google map in OpenLayers currently looks simply like:

var gmap = new OpenLayers.Layer.Google("Google Streets",
    {
    'numZoomLevels': 20,
    'sphericalMercator': true}
);

How could I apply greyscale theme to my map?

Answer 1

It seems that you can directly access the googlemap object using layer.mapObject.

Refer to gmap API to style the layer: https://developers.google.com/maps/documentation/javascript/styling

Here is a small example page I have created: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

See also the googlemap wizard : https://mapstyle.withgoogle.com/