Custom Google Maps Style Tool

17 January, 2013

A tool for playing around with Google Maps colours and generating the styling code. The generated Google Maps code can be copied from the bottom of the page. Colours can be controlled with sliders below or by entering a hex value.

14 Comments

Giorgos K.
16th October 2017 at 9:16am

Very helpful Myke. Thanks!!

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

Thanks very much, extremely useful!

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

Has this been removed?

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

Has what been removed, James?

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

the tool takes years to appear. that is why he thinks that it has been removed

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

Unfortunately that is due to the tool being loaded in an iframe, just hit F5 a couple of times :)

Piyush Prajapati
16th October 2017 at 9:16am

Hi Myke, Thanks for given the useful tool. But i have one small query regarding map URL.
Can you tell me that where can i change map URL?

Thanks & Appreciated.

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

You can edit the latitude and longitude of the map by changing the line of code that looks like this:
var latlong = new google.maps.LatLng(53.385873, -1.471471);

Post reply
Piyush Prajapati
16th October 2017 at 9:16am

Hey Myke,

Thanks man. Great!!!!

Post reply
2eux
16th October 2017 at 9:16am

Hi Myke, thank you for sharing this, just can to ask a simple question, like how to change placemark icon with your own style logo?

Thanks

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

You're welcome. Unfortunately that is beyond the scope of this tool but if you Google something like 'custom google map marker' there are plenty of examples. Good luck!

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

Is it possible to have the map marker itself be clickable?

Thanks!

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

Yep, you want to look into 'infoboxes' - boxes that appear when you click a marker.

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

NIce. Thank you.

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

Hi is it possible to show a direction from point A to B to C etc ?

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

Yes it is, you'll have to look into the directions service:
https://developers.google.com/maps/documentation/javascript/directions

Post reply
Name (required)Ivallyk
16th October 2017 at 9:16am

Comment
hi Myke
I really like your style tool - it's a great idea!
I need some specific colours that are apparently impossible to code: #7cb928 and a White that looks like a White #fffff... Can you help me out?

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

Those colours seem to work fine, Ivallyk.
Have you tried typing them into the boxes? Make sure the colour has 6 characters, e.g. FFFFFF

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

Excellent ! Very Useful.. By the way , How to change the color of the map marker and is there any way to customize the icon ? Thanks in advance..

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

Yes, you can use a custom image for your map marker!
In the example on this page, after the end of the initialise code you could write something similar to:

var marker = new google.maps.Marker({
icon: 'images/icon.png',
position: latlong,
map: map
});

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

Thank You very much .. Its very useful.. And you can add a label for change the color of the text ..

Post reply
Faheem Zafar
16th October 2017 at 9:16am

Great Tool. Extremely useful. Great work Myke.

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

Hi,

I would like to insert the code in my Wordpress. But don't know how. Can you help me please?

Thanks,

Roger

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

I'm afraid that's not within the scope of this tutorial but it is definitely possible. All you will need to do is insert the necessary html and javascript into your wordpress template file.
The other tutorial I wrote may be of some help: Custom Google Map Colours Tutorial

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

Hi - I'm trying to add a place of business to the map. Using longitude / latitude only adds the office park - not the actual business inside the office park. Is this possible?

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

Yes, you can tweak the latitude and longitude values to put the map marker in the correct place.

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

You are amazing!!!

Post reply

Leave a comment

Replying to: - Cancel