Make google maps plugin black/white or with sepia filter

Question

I'm wondering if it is possible to display Google Maps in black/white or with a sepia filter. Can it be done with some Canvas magic? Or overlaying? Or some other method?

Answer 1

Check this fiddle out, I've desaturated all elements to create the black and white effect, for example:

{
   "featureType": "road.highway",
   "elementType": "geometry",
   "stylers": [
     { "saturation": -100 },
     { "lightness": -8 },
     { "gamma": 1.18 }
   ]
 }

You can style your maps using this wizard

or using Snazzy Maps which is very user-friendly.

Answer 2

Yes you can use styled maps feature of google api.

Here is an example http://www.programmableweb.com/news/make-your-google-map-stand-out-styles/2010/05/20

Here are the docs http://code.google.com/apis/maps/documentation/javascript/maptypes.html#StyledMaps

and here is a WYSIWYG wizard to recolor your map http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Answer 3

http://www.nihilogic.dk/labs/imagefx/ brings a sepia and a desaturate (black and white) filter... But it wont work in Safari and IE can only desaturate, no sepia

Answer 4

I have this link in my history. Someone has done it in flash http://www.anttikupila.com/GoogleMapsBw/1

EDIT: After considering your idea, I also found this example I like it and you may be able to attach a listener to alter the images as they are loaded. but it may not work smoothly.