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

1

6

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.

Bulgar answered 18/4, 2014 at 11:26 Comment(0)
S
11

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/

Strapper answered 18/4, 2014 at 12:20 Comment(3)
@Victor_J_Martin added a simple tool to convert snazzymap json to google map static url..Strapper
I'm getting a console log error using your tool. Uncaught TypeError: Cannot read property 'length' of undefined for (var s = 0; s< stylers.length; s++){Divinity
Thank you so much for your time and effort! You saved me a lot of time!Marlinemarlinespike

© 2022 - 2024 — McMap. All rights reserved.