Styling Google Static Maps

Often you’ll need a map on your website but not a full-fledged Google Map with all it’s interactivity (and added weight to the page). Luckily the Google Static Maps API is perfect these use cases. It will generate an image of the map via URL parameters and even allow you to add markers, lines, shapes and styles to the map. We’re going to be looking at the styling feature.

First, generating a basic map is quite simple. The center can be an address that will be geocoded, or a latitude and longitude.

https://maps.googleapis.com/maps/api/staticmap?center=3128%20N%20Broadway%20Chicago%20IL&zoom=14&size=640x480

Google Map

If you’ve worked with the Google Maps JavaScript API you’ll know that styling features there is done with with JSON. Snazzy Maps is a great resource for finding map styles and using their editor to create your own. We want to be able to grab some of that JSON and use it in our static map, but the JSON needs to be converted to the URL parameter format that the static map API uses. My Googling for a solution lead me to this Stack Overflow thread with this link to a JSFiddle to convert JSON styles for use with the static maps API.

So if we grab the JSON for the Midnight Commander style on Snazzy Maps and paste it into the Fiddle along with our base unstyled map from above, we’ll get a styled map URL.

https://maps.googleapis.com/maps/api/staticmap?center=3128%20N%20Broadway%20Chicago%20IL&zoom=14&size=640x480&style=feature:all|element:labels.text.fill|color:0xffffff&style=feature:all|element:labels.text.stroke|color:0x000000|lightness:13&style=feature:administrative|element:geometry.fill|color:0x000000&style=feature:administrative|element:geometry.stroke|color:0x144b53|lightness:14|weight:1.4&style=feature:landscape|element:all|color:0x08304b&style=feature:poi|element:geometry|color:0x0c4152|lightness:5&style=feature:road.highway|element:geometry.fill|color:0x000000&style=feature:road.highway|element:geometry.stroke|color:0x0b434f|lightness:25&style=feature:road.arterial|element:geometry.fill|color:0x000000&style=feature:road.arterial|element:geometry.stroke|color:0x0b3d51|lightness:16&style=feature:road.local|element:geometry|color:0x000000&style=feature:transit|element:all|color:0x146474&style=feature:water|element:all|color:0x021019

Styled Google Map

The conversion sometimes isn’t quite exact and you may need to make some manual adjustments, but hopefully it gets you pretty close. There’s a lot you can do with the static maps API so be sure to check out the full documentation.

 

Philip Tadros - Founder
Founder of Doejo an award winning Innovation Studio and INC 5,000 Company. Tadros also Founded and Manages Space by Doejo a Co-working loft in River North. Tadros was featured on CNBC “Planet of the Apps” and a Moxie Award winner. Tadros’s ability to build and support strong, diverse teams with collaborative cultures, coupled with preference for innovation, has made him an authority on design and technology. He maintains positive and growing relationships with clients at Doejo with Companies like Pandora, Wilson and Groupon as well has helped Doejo be recognized globally as one of twelve WordPress VIP partners including one of the largest media companies, Tribune Media, ranked 45 on Comscore covering over half of the US market. Tadros’ ability to grow Companies has allowed for facilitating Construction, Development, Design as well as cohesively building talented Teams.