Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Converting Google Maps styles array to Google Static Maps styles string

Tags:

I've built a tool that allows folks to apply a JSON map style to a Google Map, and am now wanting to add support for the Google Static Maps API.

Using the following styles array:

"[{"stylers":[]},{"featureType":"water","stylers":[{"color":"#d2dce6"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"weight":1},{"color":"#d5858f"}]},{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":[{"color":"#555555"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"simplified"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#FFFFFF"},{"saturation":-100},{"lightness":100}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"saturation":-100}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"visibility":"simplified"},{"saturation":-100}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"saturation":-100},{"lightness":60}]},{"featureType":"poi","elementType":"geometry","stylers":[{"hue":"#FFFFFF"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]}]"

(More documentation on format)

I need to ultimately convert this into a URLescaped string, in the format: style=feature:featureArgument|element:elementArgument|rule1:rule1Argument|rule2:rule2Argument (More documentation)

So far, I've written this JavaScript to try and convert things, but it isn't working properly:

  function get_static_style(styles) {
    var result = '';
    styles.forEach(function(v, i, a){
      if (v.stylers.length > 0) { // Needs to have a style rule to be valid.
        result += (v.hasOwnProperty('featureType') ? 'feature:' + v.featureType : 'feature:all') + '|';
        result += (v.hasOwnProperty('elementType') ? 'element:' + v.elementType : 'element:all') + '|';
        v.stylers.forEach(function(val, i, a){
          var propertyname = Object.keys(val)[0];
          var propertyval = new String(val[propertyname]).replace('#', '0x');
          result += propertyname + ':' + propertyval + '|';
        });
      }
    });
    console.log(result);
    return encodeURIComponent(result);
  }

Alas, this code is outputting the following:

Output

(Right-click and select "copy URL" to see the full path I'm using -- the above is direct from the static images API)

...When instead it should look like this:

London with style

Any ideas? Thanks!

like image 277
aendra Avatar asked Oct 01 '13 11:10

aendra


People also ask

How do I export a Google map style?

Once you've finished the styling details of your map click 'Finish' in the bottom right corner. Once you click 'Finish' you will be presented with a Export Style screen. For the purposes of using this style in Google Data Studio click 'COPY JSON' to copy the custom code.

Is Google Maps static free?

Most websites and applications may use the Google Static Maps API free of charge. However, if you consistently generate a high amount of traffic, usage limits apply and you will need to pay for extra usage.

How do I get Google Maps style JSON?

To get started with Cloud-based maps styling, copy the JSON style above, then go to the Google Cloud console. To create a new map style, paste the JSON into the 'Import JSON' option. Cloud-based maps styling is available for the Maps JavaScript API at no extra charge.


2 Answers

Each single style must be supplied with a separate style-parameter:

 function get_static_style(styles) {
    var result = [];
    styles.forEach(function(v, i, a){
      var style='';
      if (v.stylers.length > 0) { // Needs to have a style rule to be valid.
        style += (v.hasOwnProperty('featureType') ? 'feature:' + v.featureType : 'feature:all') + '|';
        style += (v.hasOwnProperty('elementType') ? 'element:' + v.elementType : 'element:all') + '|';
        v.stylers.forEach(function(val, i, a){
          var propertyname = Object.keys(val)[0];
          var propertyval = val[propertyname].toString().replace('#', '0x');
          style += propertyname + ':' + propertyval + '|';
        });
      }
      result.push('style='+encodeURIComponent(style))
    });

    return result.join('&');
  }

watch the result

like image 52
Dr.Molle Avatar answered Sep 19 '22 15:09

Dr.Molle


The selected answer didn't work for me.
But only because I had a few objects without styler parameters.
I had to modify it like so:

function get_static_style(styles) {
    var result = [];
    styles.forEach(function(v, i, a){

        var style='';
        if( v.stylers ) { // only if there is a styler object
            if (v.stylers.length > 0) { // Needs to have a style rule to be valid.
                style += (v.hasOwnProperty('featureType') ? 'feature:' + v.featureType : 'feature:all') + '|';
                style += (v.hasOwnProperty('elementType') ? 'element:' + v.elementType : 'element:all') + '|';
                v.stylers.forEach(function(val, i, a){
                    var propertyname = Object.keys(val)[0];
                    var propertyval = val[propertyname].toString().replace('#', '0x');
                    // changed "new String()" based on: http://stackoverflow.com/a/5821991/1121532

                    style += propertyname + ':' + propertyval + '|';
                });
            }
        }
        result.push('style='+encodeURIComponent(style));
    });

    return result.join('&');
}

see it in action at: http://jsfiddle.net/ZnGpb/1/

p.s: JSHint

like image 38
simey.me Avatar answered Sep 17 '22 15:09

simey.me