[GIS] Applying custom Google map style in OpenLayers2

google mapsopenlayers-2

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:
enter image description here

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?

Best Answer

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/

Related Question