Free Tools for Styling Google Maps

The past few months I’ve come across some tools to use for customizing Google maps, these are primarily useful for people looking to better understand how to style a Google Map. The Google Maps JavaScript API is able to integrate an array of customization options for designers and consumers. Maps seen when getting directions on your phone are usually just in the ‘Satellite’, ‘Road’, or some default setting; however, the Maps API allows for a more thorough mix of color tones and variation. For instance, these tools listed below can be used for creating custom colors to match the style of your own web page or companies branding.

This slideshow requires JavaScript.

These are some of the free tools that I have been taking of advantage of:

Putting together Color Schemes:
There are many different formats for color that get read by the computer, some include HEX (#E67E22) or RGB (rgb(230, 126, 34)) or RGBA(rgba(230, 126, 34, 1.0)). It’s so hard to differentiate colors by memory,  it doesn’t even make sense to, so finding the equivalent codes for each color is a necessity for web design. There’s a lot of great services online that allow for easy conversion between colors and their numeric code, some sites include:

Flatuicolors.co – This webpage helps you copy colors into your clipboard and offers ‘flat colors’, which are both bold and bright shades that tend to look great for minimalist color schemes or backgrounds

http://www.w3schools.com/tags/ref_colorpicker.asp – Another tool that complements flatuicolors.co is w3school’s color picker page, I like to grab a color from flatui and if I need a different shade then this color picker will help me get a gradient of shades to choose from. It’s really simply and helps in figuring out which colors to mix well together.


Changing Google Maps Styles:

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html – For maps, there is one resource that’s great for customizing everything about a Google Map. Any mix of colors could be put into a map through the Styled Maps Wizard, which allows rivers, roads, border lines, etc.. to be removed, minimized, or changed to multiple shades of colors. Note: This tool helps setup a JSON object that can be easily placed into the styles property of the ‘map’ variable.

Snazzymaps.com – Another tool that helps demonstrate the power of the Styled Maps Wizard is Snazzymaps.com and its collection of map styles. Really anything goes on this site as far as color schemes go, there is a great database of maps to view and fortunately the JSON object is viewable as well. Having access to the JSON allows designers to modify bits of code and colors, however one thing to point out is that the map’s mapTypeId (mapTypeId: google.maps.MapTypeId.TERRAIN vs satellite vs hybrid) makes a difference when using the styles option in the Google Maps API. The color scheme may display different if your map is set to show one mapTypeId and the JSON is designed for another.  For instance, this difference could affect roads colors when zoomed in or show labels when you may not want them. Overall Snazzymaps is a fantastic tool to take advantage of when choosing a map for a website with a bold color scheme or customizing a map is necessary.

These useful tools can be leveraged to pick proper color schemes for practically any website incorporating the Maps API. Please look through some other posts to see these tools in action.

If you have a tool you’d like to share please send an email: will[at]mindbodymetrics.com

Leave a Reply

Your email address will not be published.