Someone knows how to convert GMap Static JSON to a HTML url?

Question

I have downloaded an example styled map from snazzymaps.com. I try to transform to an url like http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=512x512&zoom=15&center=Chicago but I'm not doing it well. I'm trying to transform the next example:

Example Google Map Styled Static

The JSON looks like that:

styles: [

{"featureType":"poi","stylers":[{"visibility":"off"}]},{"stylers":[{"saturation":-70},{"lightness":37},{"gamma":1.15}]},{"elementType":"labels","stylers":[{"gamma":0.26},{"visibility":"off"}]},

{"featureType":"road","stylers":[{"lightness":0},{"saturation":0},{"hue":"#ffffff"},{"gamma":0}]},

{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},

{"featureType":"road.arterial","elementType":"geometry","stylers":[{"lightness":20}]},

{"featureType":"road.highway","elementType":"geometry","stylers":[{"lightness":50},{"saturation":0},{"hue":"#ffffff"}]},

{"featureType":"administrative.province","stylers":[{"visibility":"on"},{"lightness":-50}]},

{"featureType":"administrative.province","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},

{"featureType":"administrative.province","elementType":"labels.text","stylers":[{"lightness":20}]}

I have transformed the next, but It doesn't work, I'm doing something wrong!! :S

http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=512x512&zoom=15&center=Chicago&format=png&style=feature:poi%7Cvisibility:off%7Csaturation:-70%7Clightness:37%7Cgamma:1.15%7Celement:labels%7Cgamma:0.26%7Cvisibility:off&style=road%7Clightness:0%7Csaturation:0%7Chue:#ffffff%7Cgamma:0&style=road%7Celement:labels.text.stroke%7Cvisibility:off&style=road.arterial%7Celement:geometry%7Clightness:20&style=road.highway%7Celement:geometry%7Clightness:50%7Csaturation:0%7Chue:#ffffff&style=administrative.province%7Cvisibility:on%7Clightness:-50&style=administrative.province%7Celement:labels.text.stroke%7Cvisibility:off&style=administrative.province%7Celement:labels.text%7Clightness:20

If someone can send me an advice, I would be gratefully.

Answer 1

You should read the styled maps section of the Static Maps API Guide.

A customized "styled" map consists of one or more specified styles, each indicated through a style parameter within the Static Map request URL. Additional styles are specified by passing additional style parameters.

So you need to pass multiple &style= to the URL. (one for each feature/element you style)
(You already do that)

For the colors you need to use the 0xRRGGBB syntax.
Also in your example the first line in your JSON holds threee groups. The second refers to the global styling of the map and the third to all the labels in the map, not to the feature:poi. So you need another style for that which targets feature:all and one for element:labels

The snazzymap example you linked to would translate to something like (not all styles are included)

• &style=feature:poi|visibility:off
• &style=feature:all|saturation:-70|lightness:37|gamma:1.15
• &style=element:labels|visibility:off
• &style=feature:road|lightness:0|saturation:0|hue:0xffffff|gamma:0
• &style=feature:road.highway|element:geometry|lightness:50|saturation:0|hue:0xffffff

(keep in mind that when setting visibility to off there is no point in manipulating any other property of that feature/element)

And when added to the url, you would get

http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=815x815&zoom=15&center=cicago&style=feature:poi|visibility:off&style=feature:all|saturation:-70|lightness:37|gamma:1.15&style=element:labels|visibility:off&style=feature:road|lightness:0|saturation:0|hue:0xffffff|gamma:0&style=feature:road.highway|element:geometry|lightness:50|saturation:0|hue:0xffffff

---

And here is little tool to convert snazzymap json to Google Static Map urls..

Tool at http://jsfiddle.net/gaby/s6Dyp/