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¢er=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¢er=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.
You should read the styled maps section of the Static Maps API Guide.
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 targetsfeature:all
and one forelement: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
tooff
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¢er=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/