Tutorial: Custom Google Maps Colours

24 January, 2013

Putting a map on your site is often a very nice addition, however the default colours are boring and may even clash with your colour scheme.

This short tutorial will help you create a map with a simple colour scheme of your choice.
We will be using Google Maps API v3 and all the colouring is done by the Javascript that fetches the map from Google rather than CSS as you might expect.

For this example, there is very little HTML that you need:


	<!DOCTYPE html>
	<html>
	<head>
		
		<style>
			#map {
				width: 800px;
				height: 600px;
			}
		</style>

	<body>

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

	</body>
	</html>

All we are doing here is including the Google Maps API, then we have a div with class "map" wherein the map will be created by the Javascript in the next step.

Note:- it must have a set width and height or it won't appear on the page!

Creating The Map

(The entire code for this tutorial is at the bottom)

Firstly we need to create a 'latlng' value using the latitude and longitude of the location whereupon the map will be centered. In this case, it is that of our Evoluted office.

var latlng = new google.maps.LatLng(53.385873, -1.471471);

Next we must create an array with all of the information needed for our custom style. Colours can be set by changing a variety of values:

color (hex value)
hue (hex value)
saturation (-100 to 100)
lightness (-100 to 100)
gamma (0 to 10)

Different things on the map are defined as types of 'feature', and within those there are 'element' types. A list of them all is available here, but for our purposes we will play with just a few.

var styles = [
		{
			featureType: "landscape",
			stylers: [
				{ color: '#eeddee' }
			]
		},{
			featureType: "natural",
			stylers: [
				{ hue: '#ff0000' }
			]
		},{
			featureType: "road",
			stylers: [
				{ hue: '#5500aa' },
				{ saturation: -70 }
			]
		},{
			featureType: "building",
			elementType: "labels",
			stylers: [
				{ hue: '#000066' }
			]
		},{
			featureType: "poi", //points of interest
			stylers: [
				{ hue: '#0044ff' }
			]
		}
	];

Here we have created an array with all the features we've chosen to modify. For each feature/element you can add multiple styles in this fashion.

For 'landscape' we have modified the colour, but for 'natural' (which consists of flat land, rivers etc.) we have changed the hue instead. Changing the hue is less heavy-handed than changing the colour because it forces that value onto all the sub elements, whereas the hue tints them such that they retain their lightness and saturation values.

As you can see with the 'road' feature, we have reduced the saturation and similarly, you can concatenate multiple styles to one feature to create the effect you desire.

The script is concluded by setting the map options and telling Google Maps to create the map with our options and style, which then automatically places itself in the 'map' div:

var myOptions = {
		zoom: 14,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		disableDefaultUI: true,
		styles: styles
	};

	map = new google.maps.Map(document.getElementById('map'), myOptions);

These values can be tweaked to your heart's content, for example, decreasing the 'zoom' value zooms the map out and disableDefaultUI gets rid of the zooming controls altogether.

There are a few types of mapTypeId, but using 'google.maps.MapTypeId.SATELLITE' won't incorporate any custom styling. However, if you try 'google.maps.MapTypeId.HYBRID', it looks very interesting!

I have developed a Google Maps Tool to quickly test colour scheme values and automatically create the styles array values which may come in handy.

Final Code

Here is the full code for this tutorial, enjoy!


<!DOCTYPE html>
<html>
<head>
	
	<style>
		#map {
			width: 800px;
			height: 600px;
		}
	</style>

	<script>
		window.onload = function () {

			var latlng = new google.maps.LatLng(53.385873, -1.471471);

			var styles = [
				{
					featureType: "landscape",
					stylers: [
						{ color: '#eeddee' }
					]
				},{
					featureType: "natural",
					stylers: [
						{ hue: '#ff0000' }
					]
				},{
					featureType: "road",
					stylers: [
						{ hue: '#5500aa' },
						{ saturation: -70 }
					]
				},{
					featureType: "building",
					elementType: "labels",
					stylers: [
						{ hue: '#000066' }
					]
				},{
					featureType: "poi", //points of interest
					stylers: [
						{ hue: '#0044ff' }
					]
				}
			];

			var myOptions = {
				zoom: 14,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				disableDefaultUI: true,
				styles: styles
			};

			map = new google.maps.Map(document.getElementById('map'), myOptions);
		}
	</script>
</head>

<body>

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

</body>
</html>

Up next…

Custom Google Maps Style Tool

17 January, 2013

15 Comments

Denise

16th October 2017 at 9:16am

Hi Myke,
Thank you very much for the very helpful tutorial. u r a star! I need to change the color of the zoom control and the marker icon of a google map. Any idea how I can do this? many thanks in advance:)

Blog

Tutorial: Custom Google Maps Colours

Creating The Map

Final Code

15 Comments

Leave a comment

Recent Awards & Accolades

Recent Awards
& Accolades