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
Very helpful Myke. Thanks!!
Post replyThanks very much, extremely useful!
Post replyHas this been removed?
Post replyHas what been removed, James?
Post replythe tool takes years to appear. that is why he thinks that it has been removed
Post replyUnfortunately that is due to the tool being loaded in an iframe, just hit F5 a couple of times :)
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 replyYou can edit the latitude and longitude of the map by changing the line of code that looks like this:
Post replyvar latlong = new google.maps.LatLng(53.385873, -1.471471);Hey Myke,
Thanks man. Great!!!!
Post replyHi 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 replyYou'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 replyIs it possible to have the map marker itself be clickable?
Thanks!
Post replyYep, you want to look into 'infoboxes' - boxes that appear when you click a marker.
Post replyNIce. Thank you.
Post replyHi is it possible to show a direction from point A to B to C etc ?
Post replyYes it is, you'll have to look into the directions service:
Post replyhttps://developers.google.com/maps/documentation/javascript/directions
Comment
Post replyhi 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?
Those colours seem to work fine, Ivallyk.
Post replyHave you tried typing them into the boxes? Make sure the colour has 6 characters, e.g. FFFFFF
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 replyYes, you can use a custom image for your map marker!
Post replyIn 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
});
Thank You very much .. Its very useful.. And you can add a label for change the color of the text ..
Post replyGreat Tool. Extremely useful. Great work Myke.
Post replyHi,
I would like to insert the code in my Wordpress. But don't know how. Can you help me please?
Thanks,
Roger
Post replyI'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.
Post replyThe other tutorial I wrote may be of some help: Custom Google Map Colours Tutorial
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 replyYes, you can tweak the latitude and longitude values to put the map marker in the correct place.
Post replyYou are amazing!!!
Post replyLeave a comment