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>
<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
Hi Myke,
Post replyThank 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:)
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 replynice article.
Post replyHi 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 replyHi Myke,
Thanks for this! How can I add an infoWindow to the Marker when its clicked?
Post replyAs I replied to Jessie Daryl Cacafranca,
Post replythat's a bit more complicated and beyond the scope of this post. You'll have to google around for 'infowindow'.
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 replyThat'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 replyyour tuto for customize a Google map is great and simple.
Post replySo 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.
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 replyHi 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 replyThe fact the map loads for a second implies that it is, in itself, working.
Post replyPerhaps 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]
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 replyVery 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 replyI'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.
Post reply- You can generate this code using this useful tool:
http://powerhut.co.uk/googlemaps/custom_markers.php
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 replyI'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 replyMyke
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 replyAh! These things happen to the best of us :)
I'm glad you got it working. I like the deep red style!
Help me get over a hurtle. THX!!
Post replyI 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);
Post replyvar 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});
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 replythanks,it worked perfect:)
Post replyHi, i still don't get it. Is this correct?
var myCenter = new google.maps.LatLng(26.2867, 50.2086);
Post replyvar 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});
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.
thank you for your fast reply.
but can you help me and check my code if its working?
http://pastebin.com/bXfEF5pb
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!
LOL thanks a lot! i've learn a lot from this website regarding custom google maps!
Yeah you need to load the marker after you create the map
http://pastebin.com/5Z8QrbEa
Lol that's more complicated and a bit beyond the scope of this post. You'll have to google around for 'infowindow'.
Thanks, it took me 3 days to find it.
Post replykeep up with the good job!!!
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 replyUnfortunately 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 replyThanks Myke.
You've confirmed my suspicion and the other comments I found on stack overflow. Thanks again for the handy custom colour tool.
Post replyThank`s. it works.
Post replyThank you so much!!!!
Post replyLeave a comment