Change Google Maps colours

Liven up your embedded Google Maps with some colour changes.

Last year I was redeveloping the Reform Pilates website and Anna requested a monochrome map. I found Google’s brilliant website to help – Styling Wizard – Google Maps APIs.

Plain with a touch of colour

A monochrome map was a little too plain so I simply added some colour for the water. I started with the “Silver” theme and used the “More Options” feature to set the colour of water. You can choose a different theme for your starting point.

Using the styles

Clicking ‘Finish‘ is only the start! It presents JSON code with the chosen colours and (very long) url for use with Google Static Maps API (based on the view chosen during colour editing).

For the Reform Pilates site I created a widget area and added the JavaScript code in a Custom HTML widget. This allowed me to use the map in multiple places.

Use the new styles with an eircode

Reform Pilates has an address that implies an entrance from Blackrock’s Main Street but it’s actually accessed from a different road off Main Street. Google Maps have mapped Ireland’s eircodes so you can get a precise location using an eircode when a street address is not accurate. I did that for Reform Pilates.

The code uses the Google Maps Geocoder API to convert the eircode into a latitude and longitude. Then I add a marker and info window at that location.

With the code below you can change the address and the info window content and you’re ready. You will need to put your Google Maps API key (enable ‘Maps JavaScript API‘) in the script tag at the bottom of the code.

The code