Google Maps have become so powerful and so ubiquitous that they’ve almost become a default element to include in website designs, even if it’s just to display the location of a single business on a contact page. Users know how to interact with them, and they look great.
But….they could look better! As a designer, it’s always been one of my pet peeves that it wasn’t easily possible to match the colors of the Google map to the brand colors of the website that it was living within. Sure, the maps looked great, but wouldn’t it be even greater if the blue of the water matched the blue of the design exactly? Yes. Yes it would.
Well, good news! Over the last year or two, we’ve seen the rise of a few tools (including one from Google itself) that make the styling of their maps possible, and they provide a degree of control over the map display that I had never dreamed possible.
So stick around, and we’ll color some maps!
Google Maps APIs Styling Wizard
Let’s start with Google’s own offering. Maps are made up of a TON of different elements that need to be considered when styling, and Google’s styling wizard provides an interface that makes wading through the many, many different things you can change a relatively easy process.
When you first load up the Styling Wizard, you’ll be presented with a set of basic options that let you choose from 6 different preset styles and the ability to change the density of different map elements like roads, labels and landmarks. But if you click “More Options” at the bottom of the sidebar, you’ll access the “Advanced” area which let’s you tweak every single part of the map. Want just highways to be hot pink? Done. Want bodies of water to be a hideous chartreuse? You got it.
Once you’re done, click “Finish” and copy the necessary code. You’ll need to sign up for your own Google Maps API to get everything to work, but the process is pretty simple.
Third Part Alternatives
If you’re looking for even more functionality, there are a few unofficial alternatives you should take a look at. My favorite of these is called Snazzy Maps, but another to look at is MapStyler. Both of these services offer a map styling interface that almost exactly mirror Google’s own Wizard, but then go on to offer complimentary functions on top of it. MapStyler offers a number of additional presets beyond what Google offers, and Snazzy Maps goes even further by simplifying the embed process and offering a browsable library of styles created by other people, which you can use yourself.
Ok! What are you still hanging around here for? Time to get playing with map colors, and finally having the brand-harmony for maps that every other part of your website has been enjoying for a while now. Want to work with a team that cares about getting people to where they want to go in style? Give the Solamar team a shout.