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

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

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.