17 JAN

Custom Google Maps Style Tool

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.

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!


  1. Giorgos K.

    January 18, 2013 at 10:25 am

    Very helpful Myke. Thanks!!

    • Lee

      October 29, 2013 at 8:32 pm

      Thanks very much, extremely useful!

  2. James Harrup

    September 12, 2013 at 1:14 pm

    Has this been removed?

    • team

      Myke Cook

      September 12, 2013 at 1:36 pm

      Has what been removed, James?

      • Ezequiel

        October 23, 2013 at 8:01 pm

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

        • team

          Myke Cook

          October 24, 2013 at 8:56 am

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

  3. Piyush Prajapati

    January 23, 2014 at 7:40 am

    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.

    • team

      Myke Cook

      January 23, 2014 at 4:06 pm

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

  4. Piyush Prajapati

    January 24, 2014 at 7:12 am

    Hey Myke,

    Thanks man. Great!!!!

  5. 2eux

    March 04, 2014 at 1:12 am

    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?


    • team

      Myke Cook

      March 04, 2014 at 11:28 am

      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!

  6. Marc

    August 14, 2014 at 10:55 am

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


    • team

      Myke Cook

      August 14, 2014 at 11:00 am

      Yep, you want to look into ‘infoboxes’ – boxes that appear when you click a marker.

  7. Dennis

    September 24, 2014 at 10:36 pm

    NIce. Thank you.

  8. Jan

    March 05, 2015 at 9:52 am

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

  9. Name (required)Ivallyk

    August 12, 2015 at 1:18 pm

    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?

    • team

      Myke Cook

      August 12, 2015 at 2:11 pm

      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

  10. Jagadheesh

    November 24, 2015 at 11:04 am

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

    • team

      Myke Cook

      November 24, 2015 at 11:21 am

      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

      • Jagadheesh

        November 25, 2015 at 7:13 am

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

  11. Faheem Zafar

    April 17, 2016 at 11:58 am

    Great Tool. Extremely useful. Great work Myke.

  12. Roger

    June 01, 2016 at 2:28 am


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



    • team

      Myke Cook

      June 01, 2016 at 8:58 am

      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

  13. Thomas

    July 11, 2016 at 7:56 pm

    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?

    • team

      Myke Cook

      July 13, 2016 at 9:04 am

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

  14. Lara

    June 06, 2017 at 11:28 pm

    You are amazing!!!

Leave your comment