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.

What you’ll get is something like this:

[{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"},{"color":"#2d2829"}]},
{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#d7c6c6"}]},
{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#f1ebea"}]},
{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"}]},
{"featureType":"water","elementType":"labels.text","stylers":[{"visibility":"off"}]},
{"featureType":"administrative.locality","elementType":"labels.text","stylers":[{"visibility":"simplified"},{"color":"#ae968f"}]},
{"featureType":"administrative.locality","elementType":"labels.icon","stylers":[{"visibility":"simplified"},{"color":"#f7893c"}]},
{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},
{"featureType":"road","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#ffffff"}]},
{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},
{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},
{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},
{"featureType":"transit","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#e3d7d7"}]},
{"featureType":"water","elementType":"all","stylers":[{"color":"#a9c4e3"}]}]

This JSON string contains all the alterations you made while using MapStylr (you, of course, don’t need to use MapStylr, but it certainly makes the job easier.)

So, now that we have our style, we just need to alter our map script a bit to actually use it. To start, we need to put our JSON string into a variable:

var styleStr = [{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"},{"color":"#2d2829"}]},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#d7c6c6"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#f1ebea"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"water","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels.text","stylers":[{"visibility":"simplified"},{"color":"#ae968f"}]},{"featureType":"administrative.locality","elementType":"labels.icon","stylers":[{"visibility":"simplified"},{"color":"#f7893c"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#ffffff"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#e3d7d7"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#a9c4e3"}]}];

and then we add 3 lines after we initiate our map:

var styledMap = new google.maps.StyledMapType(styleStr, {name: "Styled Map"});
map.mapTypes.set('custom_style', styledMap);
map.setMapTypeId('custom_style');

Now you have a pretty map!