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

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

David East is a full-stack developer; from SQL to styling. He works for Aspenware in Denver, Colorado, making freaking amazing applications. You can visit his website davidea.st where he blogs and provides code snippets. Follow on twitter @eastdotnet.

Newsletter

13 Comments
  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?

    Reply
    +9
    • David East Aug 15, 10:06 pm

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

      Reply
      0
      • Mitchell Murry Aug 15, 10:07 pm

        Sorry just the styling aspect.

        Reply
        +1
        • 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.

          Reply
          0
          • 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.

            +6
  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!

    Reply
    +11
    • 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.

      Reply
      +5
  3. prabhjeet Aug 16, 7:39 am

    very good tutorial and explanation is really awesome, thank you

    Reply
    +4
  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.

    Reply
    +4
    • 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.

      Reply
      +3
  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.

    Reply
    +4
    • 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.

      Reply
      +4
  6. cja100 Oct 19, 3:34 pm

    Yep, the demo link seems to be broken.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters