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.

SEE ALSO: AngularJS: A Detailed Guide for Beginners

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.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

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 Developer Advocate for Firebase in San Francisco. You can visit his website davidea.st where he blogs and provides code snippets. Follow him on twitter @eastdotnet.

Newsletter

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

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

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters