How to Make Custom Flat Styled Google Maps with jQuery and Flat UI


Google Maps with jQuery and Flat UI

Designers who use Designmodo user interface kits already know they can create a variety of designs with these speciality tools.

In this video, developer David East uses Flat UI and Google Maps to create custom maps that feature a flat style, using using Google’s styled maps tools. In addition, he explains how to link your final product into the Designmodo affiliate program, which allows you the opportunity to make money.

This step-by-step tutorial is easy to follow and you can watch it while working on your own Google maps.

What you will learn in this tutorial: How to create custom map styles using flat colors and Flat UI styling. After the design and code work is finished, East explains how to link your finished product into the Designmodo affiliate program.

Video run time: 25 minutes

Download Source Code


  1. Mitchell Murry Aug 15, 9:55 pm

    Hey guys,

    Great tutorial. Do you know of great way to integrate this with a wordpress theme?

    • David East Aug 15, 10:06 pm

      Do you mean the entire piece, or just the custom styling of the maps?

      • Mitchell Murry Aug 15, 10:07 pm

        Sorry just the styling aspect.

        • Mitchell Murry Aug 15, 10:10 pm

          I think I asked a question prematurely…. nevermind. I’ve been defiantly looking at a screen too long.

          • David East Aug 15, 10:12 pm

            Haha! We’re all guilty of that quite often. Let me know if you have any other questions.

  2. Christian Aug 15, 10:21 pm

    Honestly, i think this is the best video tutorial i’ve seen so far, David explains everything quickly but clear. Thumbs Up!

    • David East Aug 16, 7:45 am

      Thanks! I try to keep things at a quick pace, while still not losing out on the explanation, so I can cover as much as possible. My theory is that you can always rewind or slow the video down.

  3. prabhjeet Aug 16, 7:39 am

    very good tutorial and explanation is really awesome, thank you

  4. Marco Berrocal Aug 21, 5:00 am

    Don’t want to sound like I am kissing your ass but you have a knack for doing tutorials. I have seen others do it as screencasts and they are terrible.

    This is great. I was going to go with MAPBOX but after seeing this, I might as well dip in myself.

    Great stuff.

    • David East Aug 23, 8:31 pm

      Thanks man! I really appreciate the kind words. Stay tuned for the upcoming week. I’ll actually have two videos out.

  5. Jason Aug 22, 10:19 pm

    Dude! Great, Great, Great tutorial!!! There’s so much ‘how to’ information packed inside this 25 mins my mind exploded. This is a must view for anyone who’s using the Google Maps API. Wonderful job and thank you for taking the time to put this awesome piece together.

    • David East Aug 23, 8:32 pm

      Thank you so much! I hope you like the stuff I’ll be putting out soon as well.

  6. cja100 Oct 19, 3:34 pm

    Yep, the demo link seems to be broken.

  7. Roger Jul 26, 5:40 am

    I too, think that your very simplified explanation of the coding really clarified things in a way that I actually understood and learned something from. Most times I just glaze over with the way things are “explained”.

    Any suggestions for creating a nice store locator for 1,000s of locations, for free on client’s site? I have been looking at so many options – from some things to grab off Github to different services and at Google (the way they present using their API, freaked me out*). There are just so many options, I don’t where to jump in. I’d really appreciate any help or pointers.

    As a designer, I would like to use your method to customize client’s maps to better reflect their brand and the site design. I think that would be great. It’s a feature I’d been looking to do, and nice to have in the tool belt.

    *Google is supposed to be all about simplicity, but when it comes to explaining this stuff, they certainly make it seem really complicated. Maybe you could work with them in creating simplified tutorials that actually explain things.

  8. Daníel Andri Kristjánsson Nov 19, 1:28 pm

    First of all, awesome video man.
    Second of all, I’m having some problem with the colorDrop.
    I can’t get the colorDrop in the dropdown menu. What am I doing wrong ?

    App Mock Up


    Pick a color  

    (function( $ ) {


    })( jQuery );

  9. mia Oct 2, 7:26 pm

    Wonderful tutorial!
    I have a question since I’ve just started learning js. So this is the scenario, people come to this page and customize their google map then how can they embed the map in their website?
    thank you

Leave a Reply

* Minimum length: 20 characters