Custom Styled Google Maps

It’s a powerful tool that almost every web developer uses at some point. The API makes it even more useful when you need to plot, for example, office locations. It has some pretty cool features, and it even lets you overlay images which is useful in its own ways.
But let’s say you love the map, you don’t want any overlays, but the basic map colors just aren’t working with your design. Fortunately for you, they let you style almost every aspect of the map to meet whatever design need you have. There are, of course, some exceptions, but for the majority of users, the options they supply are adequate.

To do this we use a third-party styling program – the best I’ve found so far, and the most intuitive is MapStylr

Head over to their editor – it doesn’t require a login unless you want to save your layouts for later. This is going to be a more technical look at how to actually apply your style to Google Maps after you’ve created it, so for the purposes of this blog I won’t go into detail on how to use MapStylr; however, play around with the tool a bit, it doesn’t take long to figure out how it works and make changes. Once you’re done with the tool, click ‘Get JSON‘ in the top right of the editor. This will give you the style output that you need for the part we’re about to do.