JournalNotes & Thoughts

We’ve had quite a few people comment about the Supereight contact page. Many folks want to know how we styled the Google map so that it looks desaturated with red roads. Okay! Here’s how we did it:

We used the Google Maps JavaScript API v3 Styles function and it’s pretty straight forward to implement if you have a basic understanding of the Google Maps API.

Styled maps allow you to customise the look of the standard Google base maps, changing the visual display of  roads, parks, and built-up areas. More detailed information can be found on the Google maps developer’s guide:
https://developers.google.com/maps/documentation/javascript/styling

There is also an easy to use Styled Maps Wizard:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Below is the snippet of code that we use to style the contact page map for the Supereight website: