Last update: December 29, 2019

How to style Google Maps

I find the default Google Map style a bit too bright, too flashy. It doesn't always fit well with the design of the page.
With some filters or some blending effects, we can easily "style" it.

Here is the default map style:

Grayscale Powah!

Most of the time, I simply apply a grayscale effect directly on the map element. It makes the map less flashy.

On the left, we have a grayscale of 50%.
On the right, we have a grayscale of 100%, and 0% on hover.

Adding a layer

How about adding a layer over the map, so we can also change the colors.

Here is how to do:

Step 1

Add a Div, and set his position to relative

Step 2

Inside that Div, add your map first, then add another Div, just like this:

For the 2nd Div, change his position to absolute, with top, bottom, right and left = 0:

Add a background color. The color will then cover the full map.

Step 3

The key is to "blend" the color with his background (the map). In Advanced / Effects / Opacity, change the Mix Blend Mode to color or overlay.

You will notice something. As we have covered the map entirely, we can't access it anymore (no more interaction).

Step 4

Simply add this single line of CSS to the Div:


More effects

Instead of a simple background, we can apply a gradient, or add a "texture" (SVG background). The possibilities are endless...