Change the standard Google maps colour scheme with CSS filter


UPDATE - JUNE 2014: Google maps have recently launched Google Maps API version 3. The new API lets you create your own custom styles and colour schemes. I've written a new blog post on styling via the API here

We all know and love google maps, its definitely the easiest way to embed an interactive map into any webpage, the standard colour scheme has never been to my liking though and it looks more dated everyday, it also clashes with the colour scheme of the website on some occasions. I recently built a site which was designed with a black and white map in mind and at first glance it looked like it would require an image of the map instead of an embedded interactive one. There are of course some great alternative mapping tools out there such as mapbox which has a great API and custom colour schemes, these tools are definately recommended but they do cost a small monthly fee for all the features.

It suddenly dawned on me that I could use the new CSS3 filter style to change the colour scheme to greyscale, that way we have the same great google map only black and white. It is a little known fact that the filter style doesn't just work on images, it will quite happily work on almost anything including the google maps embedded iframe!

All you need to do is get the google map embed script as you normally would from either the google maps website or by using the API. It will look a bit like the below script, you will need to add this to your HTML page and add a class on the iframe so we can select it, I've given my iframe the class of 'map'. By the way you could just select the iframe but that is a little bit dangerous if you have other iframes on the page.

Then we just need to select the iframe in your CSS file using the class and add your filter styles, you will need to add the browser prefixes until the style has been properly released or just use prefixr or a SASS mixin.

.map {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);

This should produce a grayscale map like this one:

Then it up to you to use the filters to make your colour scheme. Check this site to find out some of the available filters.

Here some examples

Here's a map produced with the sepia filter.

.map {
    -webkit-filter: sepia(100%);
       -moz-filter: sepia(100%);
        -ms-filter: sepia(100%);
         -o-filter: sepia(100%);
            filter: sepia(100%);

And here's one produced with the hue-rotate filter.

.map {
    -webkit-filter: hue-rotate(75deg);
       -moz-filter: hue-rotate(75deg);
        -ms-filter: hue-rotate(75deg);
         -o-filter: hue-rotate(75deg);
            filter: hue-rotate(75deg);

Using the invert filter produces a nighttime effect map.

.map {
    -webkit-filter: invert(90%);
       -moz-filter: invert(90%);
        -ms-filter: invert(90%);
         -o-filter: invert(90%);
            filter: invert(90%);

Remember this effect wont work in some of the older browsers which don't support CSS3 or the filter style it also looks like the latest Firefox doesn't currently support the filter style either. Never fear the fallback is just the standard colour scheme.

If you think you have made a great colour scheme post a link to your page below.