Google Style Wizard HomeBetween the Google Styling Wizard and Snazzy Maps you no longer have to settle for default Google map colors. Why not match them to your site colors like you do everything else? This tutorial will walk you through exactly how to do that.

Now, Styling Maps is Easy

Google Maps is such a powerful tool and many websites really just use it for showing a simple location. But one seemingly simple feature has always been extremely complex: colors and styling. That is, until recently.

Since we launched Maps Builder back in 2014 we supported the only way to apply map style themes easily with Snazzy Maps. In our free Maps Builder plugin, you can choose from 16 different preset themes. In our Pro version there are over 80 and if you had the know-how to create your own themes, you could upload them directly into your map. But the part about “if you had the know-how” was the really tricky part.

Recently, Google released it’s own tool for styling maps on your own. And guess what? It creates the color themes in the exact same format Snazzy Maps does so you can upload them directly into Maps Builder Pro today.

Navigating Google Styling Wizard

It may seem relatively easy to say “I want the roads red, and the other stuff blue or white” but there are a lot of different types of locations, routes, landmarks, and more that makes up Google Maps. Each element has space that it fills as well as borders. Further, the details change at different zoom levels. Generally speaking, in order to fully customize a Google Map you need A LOT of controls.

That’s what the Google Map Style Wizard does for you. It creates an interface with A LOT of options for customizing the colors and border widths of pretty much everything. Honestly, writing an article all about all the settings would be redundant and pretty much unnecessary. It’s best to just jump in and start customizing.

You can start by just choosing any of their preset themes. They’re fine, but they are basically already included in both our Free and Pro plugins. From there, you can choose your basic style then click on the “Advanced” options button. That’s where the real magic of this tool is found.

The advanced options do some smart things. Each root menu item can set a color which the sub-items can then inherit. This is really useful for keeping your colors simple. But if you want to customize further, you can open up the sub-items and customize those for more detail. With most items, we can set both a fill color and border color and border width. These three simple items can dramatically impact the overall look and feel of your maps.

For example, “Road” is a root menu item. In the example you’ll see below, I used the Orange from our WordImpress website. The side roads and highways all can inherit that color.

But here’s a few general things to keep in mind:

  • Use a colorpicker (like the ColorZilla Chrome/Firefox Extension) to get the colors of your website to use.
  • Keep it simple: 2-4 colors tops.
  • Color contrast is really important. The side roads can get lost very easily.
  • The map isn’t useful if people can’t understand where they are in relation to important landmarks.

Once you have that all dialed in, you need to apply your style to your maps.

Apply Your Styles with Maps Builder Pro

This is the easy part. In Google Style Wizard just hit “Finish” and you’ll see a popup like this show up:

Google Style Wizard JSON Popup
Google Style Wizard JSON Popup

Once you hit that “Copy JSON” link, go into your Maps Builder Pro map, and in the “Display options” section click on the “Set a Custom Snazzy Map” button and paste the code into the text area that appears.

Here’s a quick video overview of how that works dynamically:

Try it out with our WordImpress Maps Styles

Here’s the JSON code I created when testing this out. Copy and paste the below into your map:

What’s Your Favorite?

There’s another tool called MapStylr which does a similar thing and has much more preset styles. You can see it in the video above. So there are more tools for this as well, your options really are many.

Have you customized your maps to match the look/feel of your site?

We’d love to see it live. Feel free to drop a link in the comments or even drop your custom JSON code there as well.

Matt is Head of Support and Community Outreach at WordImpress.com. He's the author of many free WordPress plugins, a popular blogger at his website, an admin of the Advanced WordPress Facebook group, co-organizer of the San Diego WordPress Meetup, and a frequent WordCamp speaker and attender.

Follow Matt:

2 Responses to “How to Style Your Google Maps”

  1. Ian - Tringa Studio

    Nice article. We have used Snazzy maps on several projects now, and love a custom map! Check out the post. https://tringastudio.com/snazzy-maps-wordpress-integration-and-styles/

    Reply
    • Matt Cromwell

      Hi Ian, ya I’ve seen that plugin on .org. We built Maps Builder specifically for the advanced Maps functionality and supporting Snazzy Maps and now also the Google Style Wizard is icing on the cake as well. Thanks for reading!

      Reply

Leave a Reply