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>

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:)

Post reply
Myke Cook
16th October 2017 at 9:16am

I'm afraid you can't edit the Google controls without breaking the terms and conditions. You can have a custom map markers though, if you search around there are plenty of tutorials. Good luck!

Post reply
Rk
16th October 2017 at 9:16am

nice article.

Post reply
Johnc0
16th October 2017 at 9:16am

Hi there, just became aware of your blog through Google, and found that it is really informative. Im going to watch out for brussels. Ill be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers! ekedefcbbead

Post reply
Oliver
16th October 2017 at 9:16am

Hi Myke,

Thanks for this! How can I add an infoWindow to the Marker when its clicked?

Post reply
Myke Cook
16th October 2017 at 9:16am

As I replied to Jessie Daryl Cacafranca,
that's a bit more complicated and beyond the scope of this post. You'll have to google around for 'infowindow'.

Post reply
Tim
16th October 2017 at 9:16am

Could this script be used/arranged to where it works in something like Corel Draw or Photoshop. Kinda teaching myself this stuff, so don't chop my head off if it's a stupid question lol

Post reply
Myke Cook
16th October 2017 at 9:16am

That's an interesting question!

If you want a coloured map for use in Photoshop, why not try using my Custom Google Maps Style Tool to create your map, then take a screenshot and use that image?

Post reply
Sylvain
16th October 2017 at 9:16am

your tuto for customize a Google map is great and simple.
So I wonder if you could help me :
I don’t know anything about js... And I’m looking for a way to obtain an outer glow effect around the landscape (continents) of my map (or, same result, an inner glow around the seas). (If only the “stroke” option of water was working, but change color of the stroke of water doesn’t change anything...)
Then, I’m looking for a way to display a watermark image in a unused zone of the map (for exemple in ocean).
Do you know a way to do this ?
(Sorry for my English, I’m French.)
Thank you in advance and happy new year.

Post reply
Myke Cook
16th October 2017 at 9:16am

You can try the Custom Google Maps Style Tool to create the effect you need.
It might not be possible. I don't think water has stroke.

To add a watermark, it might be easy to place it as a custom map marker as described here in the documentation.

Good luck and happy new year!

Post reply
Dario
16th October 2017 at 9:16am

Hi Myke! Great job! Im having some trouble with the code. The map seems to load for about half a second, then its gone, and a "Oops! Something went wrong." appears. Something to do with the javascript console. Any suggestions?

Post reply
Myke Cook
16th October 2017 at 9:16am

The fact the map loads for a second implies that it is, in itself, working.
Perhaps you have some other Javascript running that breaks it?
Try stripping out everything but the code in this example and you will hopefully see that it still works.
[Tested in current versions of Chrome, IE, Firefox and Safari]

Post reply
Paul
16th October 2017 at 9:16am

Thank you very much for this. I really wanted a custom map for a site I am building, but had no idea where to begin. Thanks to you, I have an awesome, one-of-a-kind map and learned something new.

Post reply
daniel
16th October 2017 at 9:16am

Very Useful post!Thank you very much.I have a question though..i was trying to add a marker but its not working..
var marker = new google.maps.Marker({position:myCenter,icon: 'img/yellow-dot.png'});

this is the code with i would want to make a marker work and but when i put this in the code..the map wouldnt even appear on the screen.. any idea? thx

Post reply
Myke Cook
16th October 2017 at 9:16am

I'm not sure if you can use the image in such a simple way, your code ought to look more like:

var myCenter = new google.maps.LatLng(53.385873, -1.471471);
var myIcon = new google.maps.MarkerImage(
'img/yellow-dot.png',
new google.maps.Size(24,23),
new google.maps.Point(0,0),
new google.maps.Point(12,23)
);

var marker = new google.maps.Marker({position: myCenter, icon: myIcon});

The variables for the marker describe how big it should be, and which part of the image is the pointer.
- You can generate this code using this useful tool:
http://powerhut.co.uk/googlemaps/custom_markers.php

Post reply
James
16th October 2017 at 9:16am

Thanks Myke
This works great when I use it has you have done it.
But when I try and put the javascript in a separate js file it does not work, I get a 'google is not defined ' error

Any tips would be greatly appreciated.

Post reply
Myke Cook
16th October 2017 at 9:16am

I'm sorry you're having problems, it appears to work for me; copying everything inside the <script> </script> tags into a new file, then including that file like so:
<script type='text/javascript' src='main.js'></script>

Perhaps you could upload your attempt so I can investigate?

Post reply
James Bickerton
16th October 2017 at 9:16am

Myke
Sorry for not getting back sooner.

I'd forgotten to put a link in my header to the google script *slaps forehead*

You can see it working here
http://allemi.gr/%CF%80%CE%BF%CE%B9%CE%BA%CE%B9%CE%BB%CE%AF%CE%B5%CF%82-%CE%BA%CE%B1%CF%86%CE%AD/matagalpa-nicaragua/

Thanks for the help and a great tutorial

Post reply
Myke Cook
16th October 2017 at 9:16am

Ah! These things happen to the best of us :)
I'm glad you got it working. I like the deep red style!

uncle vito
16th October 2017 at 9:16am

Help me get over a hurtle. THX!!

Post reply
daniel
16th October 2017 at 9:16am

I tried this code that you advised, but the marker isnt there..and i cant figure out why..
any idea? a thank you for your help by the way:))

var myCenter = new google.maps.LatLng(43.499634, 10.050722);
var myIcon = new google.maps.MarkerImage(
'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|dE7222',
new google.maps.Size(24,23),
new google.maps.Point(0,0),
new google.maps.Point(12,23)
);
var marker = new google.maps.Marker({position: myCenter, icon: myIcon});

Post reply
Myke Cook
16th October 2017 at 9:16am

Ah! What you need to add is map: map, like this:
var marker = new google.maps.Marker({position: myCenter, icon: myIcon, map: map});

(or whatever your map variable is called when you created it with
map = new google.maps.Map(document.getElementById(mapname), myOptions);
)

Then you'll have to tweak the numbers to match the right dimensions of the image you're using.

Post reply
daniel
16th October 2017 at 9:16am

thanks,it worked perfect:)

Post reply
Jessie Daryl Cacafranca
16th October 2017 at 9:16am

Hi, i still don't get it. Is this correct?

var myCenter = new google.maps.LatLng(26.2867, 50.2086);
var myIcon = new google.maps.MarkerImage(
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|dE7222′,
new google.maps.Size(24,23),
new google.maps.Point(0,0),
new google.maps.Point(12,23)
);
var marker = new google.maps.Marker({position: myCenter, icon: myIcon, map: map});

Post reply
Myke Cook
16th October 2017 at 9:16am

Your code works for me. perhaps use " instead of ' around the icon image.

This post is about making custom colour schemes, not adding map markers.

Jessie Daryl Cacafranca
16th October 2017 at 9:16am

thank you for your fast reply.

but can you help me and check my code if its working?

http://pastebin.com/bXfEF5pb

Jessie Daryl Cacafranca
16th October 2017 at 9:16am

wow! thanks god i found your website! very helpful for us.

Can you help us also to add an information window when clicked?

cheers mate!

Jessie Daryl Cacafranca
16th October 2017 at 9:16am

LOL thanks a lot! i've learn a lot from this website regarding custom google maps!

Myke Cook
16th October 2017 at 9:16am

Yeah you need to load the marker after you create the map
http://pastebin.com/5Z8QrbEa

Myke Cook
16th October 2017 at 9:16am

Lol that's more complicated and a bit beyond the scope of this post. You'll have to google around for 'infowindow'.

ilan
16th October 2017 at 9:16am

Thanks, it took me 3 days to find it.
keep up with the good job!!!

Post reply
christine
16th October 2017 at 9:16am

This is great. I was able to use your code and your superbe custom colour tool to create my map.
However, at the bottom right hand side, there's a Report an error link and wondering if you know how to remove that.
I thought that it would be part of the custom control and thus using
disableDefaultUI: true,
should do it, but it doesn't work.

Any suggestions?

Post reply
Myke Cook
16th October 2017 at 9:16am

Unfortunately it isn't part of the UI so can't be removed like that.
In theory they could be removed by adding CSS such as:
.gmnoprint, gmnoscreen {
display: none!important; }

Although I couldn't recommend that because Google requires them to be visible.

Post reply
christine
16th October 2017 at 9:16am

Thanks Myke.

You've confirmed my suspicion and the other comments I found on stack overflow. Thanks again for the handy custom colour tool.

Post reply
sayed saeed hosseini
16th October 2017 at 9:16am

Thank`s. it works.

Post reply
simon
16th October 2017 at 9:16am

Thank you so much!!!!

Post reply

Leave a comment

Replying to: - Cancel