Sometimes a handy little web app will come along which is useful and fun to use. Well, maybe fun for a map-geek like me. This is one of my faves right now. Yeah, it’s probably been knocking about for a while, but it’s new(ish) for me. It’s called Snazzy Maps.
We’ve all had those web projects where the client wants a map to act like a Google Map, but not look like a Google Map. This might mean adding their brand colours or removing unnecessary labels.
For years, this would have stumped me, but not any longer. The Google Maps API allows devs to customise pretty much all the elements on there through a set of style parameters. Something like this code below which will take the administrative layer, find text labels and colour them with hex #444444
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
}
]
}
],
{name: 'Styled Map'}
);
// Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
Easy!
Of course, there are absolutely loads more options available to style – I just picked the first one I had done on a project recently as an example.
Which brings me to that recommended web app: Snazzy Maps. This can be used to quickly and easily build these styledMapType objects using a fairly easy to get the hang of UI. Just fire it up, choose a basic starting theme, and then tick/untick the items you need on the map.
Once done you can save the map for future (if you are particularly proud of your creation), or simply generate the code needed for the API.
There’s also a lot of community generated maps ready to use if you can’t be bothered making your own. These are categorised to make them nice and easy to search through – from nice minimal, white ones, to the obligatory vintage styles – And there’s the usual ratings system and previews as well.
Don’t know about you, but I do enjoy a nicely on-brand Google Map! And clients love them.