How to create a black and white Google Map

| Posted by absolute

View demo

Download source

Embedding a Google Map into a webpage is a quick and easy way to give your users accurate location information. But if you don’t like the standard colour scheme, or it clashes with the branding of your website, there is a very easy way to make the map black and white. That way you still have useful map but now it’s a muted shade that looks stylish and works with virtually any colour scheme.

Here are 5 simple steps to change the colour of an embedded Google Map:

Step 1

Create a container for your map.

<div id="map"></div>

Place this anywhere on your page where you want the map to appear. You will also need to apply a height to the map container to make the map visible.


Step 2

Include the Google Maps API at the bottom of your HTML page, above the closing

</body>

tag.

<script type=“text/javascript” 
src=“https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”>


Step 3

Add the javascript to initialise the map.

<script type=“text/javascript”>
window.marker = null;
function initialize() {
var map;
var nottingham = new google.maps.LatLng(52.934658, -1.131450);
var mapOptions = {
// SET THE CENTER
center: nottingham,
// SET THE MAP STYLE & ZOOM LEVEL
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom:9,
// SET THE BACKGROUND COLOUR
backgroundColor:"#eeeeee",
}
map = new google.maps.Map(document.getElementById(‘map’), mapOptions);
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>

You should now have a working map in the standard Google Map colours.


Step 4

Within the code that you added to initialise the map we’ll now include the settings to desaturate all colours used in Google Maps.

Above mapOptions add this:

var style = [
{ "elementType": "geometry", "stylers": [
{ "saturation": -100 }
]
}
];

Below mapOptions add this:

// SET THE MAP TYPE
var mapType = new google.maps.StyledMapType(style, {name:"Grayscale"});
map.mapTypes.set(‘grey’, mapType);
map.setMapTypeId(‘grey’);

At this point we discovered an issue with the colours provided by Google Maps. In the UK, “A” roads are marked with labels that have a green background and yellow lettering. Unfortunately when these colours are desaturated the contrast is not enough to keep them readable, therefore we need to add some colour back in to just these labels.


Step 5

Add back any colours which are now unreadable.

Within var style add this, above the “elementType” brackets:

{ "featureType": "road",
"elementType":
"labels.icon",
"stylers": [
{ "saturation": 1 },
{ "gamma": 1 },
{ "visibility": "on" },
{ "hue": "#e6ff00" }
]
},

We decided to use our brand accent colour to mark “A” roads, as this provides the contrast we need to make sure the labels are still readable.

Now you should have a black and white map. You can move on to adding your own pin marker and even customise the Google Map controls like we have.

If you’ve been inspired by this tutorial, leave a comment below to your map and show us what you’ve created.

RESOURCES

View demo

Download source