Skip to content
Absolute Design
Magento - Business Solution Partner Adobe Solution Partner

Customise embedded Google Maps with a specific colour scheme

Posted by: Clare Rose

Our guide on How to create a Black and White Google Map helps your embedded map look both stylish and to easily fit into your web design. But what if you want to style the map in a specific colour scheme so that the embedded map matches your company’s brand or your website’s colour palette. In the previous guide we showed you how to extend the MapOptions object to change the colour of the map to black and white. From here it is also possible to provide other custom options.

By supplying a JavaScript array it’s possible to:

  • Specify your own colour choices to overwrite the default ones
  • Dictate colours for specific map elements, such as roads and labels
  • Hide elements that you don’t want to include in your custom map


To change the colour of your map you first need to specify the map feature that you want to change, for example roads or bodies of water. You can find a complete list of map features that can be customised here.
Once you’ve identified the feature type that you want to colour, in this case the landscape, you can define the visibility and colour options:

 var style = [ { featureType: "landscape", stylers: [ { color: "#D8E146" } ] } ]; 

The above example demonstrates how you can create a style array that changes the colour of the landscape. In this case we’ve changed the colour of the landscape to the Absolute brand green. It also shows the colour’s hexadecimal value, which is just one way to state the colour. Alternative ways include a combination of hue, colour, and lightness/gamma values.
This can then be integrated within your map using the following example:

 map.setOptions({ styles: styles }); 

A complete example of a map setup with custom colours is shown below, this example adds custom colours to the sea, landscape and business showing just some of adaptations that are possible:

Step 1 Creating a container for your map

 <div id="customMap" class="custommap"></div> 

Step 2 Integrate Google Maps API

There are several ways to do this but for this example we would advise including the ‘JS’ within your footer:

 <script src=""></script> 

Step 3 Add some CSS

Add some CSS to define the map’s size on the page:

 .custommap { height: 500px; width: 500px; } 

Step 4 Adding the Custom JS

 <script type="text/javascript"> // Initialize function function initialize() { // Starting location var location = new google.maps.LatLng(52.934658, 1.131450); // Starting map options var mapOptions = { center: location, zoom: 12 }; // Create a new Google Maps Object passing in the element and custom options var map = new google.maps.Map(document.getElementById(‘customMap’),mapOptions); // State custom styles var styles = [ { "featureType": "landscape", "stylers": [ { "color": "#D8E146" } ] },{ "featureType": "water", "stylers": [ { "color": "#80c1e6" } ] },{ "featureType": "", "stylers": [ { "color": "#abdc89" } ] } ] // Set custom styles on map map.setOptions({styles: styles}); } // Event Listener to call the function once the HTML elements on the page have loaded google.maps.event.addDomListener(window, ‘load’, initialize); 

Code Pen

See the Pen Custom Colour Google Map by Absolute Design (@absolute-design) on CodePen.


There are a number of great resources available for Google Maps including premade custom styles that can be easily embedded. Snazzy Maps is a great resource and you can find Google’s wizard for helping you set up custom colours here.