24 JAN

Tutorial: Custom Google Maps Colours

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>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<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>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<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>

Written by Michael Cook

Mike is a frontend web developer at Evoluted. He spends his days neck deep in JS and his nights having a beer and playing guitar. Read more posts by Michael Cook

Free social media icons for every subscriber

Sign up to our mailing list to have new updates delivered straight to your inbox. Every subscriber will get a free pack of social media icons!


36 Comments

  1. Paul

    March 02, 2013 at 6:44 am

    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.

    • daniel

      May 02, 2013 at 9:06 am

      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

      • team

        Myke Cook

        May 02, 2013 at 9:17 am

        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

  2. James

    April 17, 2013 at 4:22 pm

    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.

    • team

      Myke Cook

      April 18, 2013 at 11:56 am

      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?

  3. uncle vito

    April 25, 2013 at 9:31 pm

    Help me get over a hurtle. THX!!

  4. daniel

    May 02, 2013 at 10:09 am

    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});

    • team

      Myke Cook

      May 02, 2013 at 10:21 am

      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.

      • daniel

        May 02, 2013 at 10:33 am

        thanks,it worked perfect:)

      • Jessie Daryl Cacafranca

        June 26, 2013 at 9:29 am

        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});

        • team

          Myke Cook

          June 26, 2013 at 9:39 am

          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

            June 26, 2013 at 10:05 am

            thank you for your fast reply.

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

            http://pastebin.com/bXfEF5pb

          • team

            Myke Cook

            June 26, 2013 at 10:15 am

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

          • Jessie Daryl Cacafranca

            June 26, 2013 at 10:22 am

            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!

          • team

            Myke Cook

            June 26, 2013 at 10:30 am

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

          • Jessie Daryl Cacafranca

            June 26, 2013 at 10:31 am

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

  5. ilan

    June 20, 2013 at 7:51 am

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

  6. christine

    June 22, 2013 at 2:17 am

    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?

    • team

      Myke Cook

      June 24, 2013 at 12:21 pm

      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.

      • christine

        June 24, 2013 at 6:29 pm

        Thanks Myke.

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

  7. Denise

    July 11, 2013 at 6:41 pm

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

    • team

      Myke Cook

      July 15, 2013 at 4:53 pm

      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!

  8. Rk

    October 01, 2013 at 5:07 am

    nice article.

  9. Johnc0

    May 08, 2014 at 11:05 pm

    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

  10. Oliver

    January 21, 2015 at 6:55 pm

    Hi Myke,

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

    • team

      Myke Cook

      February 11, 2015 at 10:00 am

      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’.

  11. Tim

    January 02, 2016 at 3:14 am

    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

    • team

      Myke Cook

      January 05, 2016 at 11:22 am

      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?

  12. Sylvain

    January 05, 2016 at 3:24 pm

    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.

    • team

      Myke Cook

      January 05, 2016 at 3:31 pm

      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!

  13. Dario

    July 31, 2016 at 1:20 am

    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?

    • team

      Myke Cook

      August 01, 2016 at 10:27 am

      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]

  14. sayed saeed hosseini

    August 01, 2016 at 10:17 am

    Thank`s. it works.

  15. simon

    February 19, 2017 at 4:43 pm

    Thank you so much!!!!

Leave your comment