title: Converting Google Maps styles array to Google Static Maps styles string
body: <p>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 <a href="https://developers.google.com/maps/documentation/staticmaps/" rel="noreferrer">Google Static Maps API</a>. </p>
  
  <p>Using the following styles array:</p>
  
  <p><code>"[{"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"}]}]"</code></p>
  
  <p><a href="https://developers.google.com/maps/documentation/javascript/styling" rel="noreferrer">(More documentation on format)</a></p>
  
  <p>I need to ultimately convert this into a URLescaped string, in the format: <code>style=feature:featureArgument|element:elementArgument|rule1:rule1Argument|rule2:rule2Argument</code> <a href="https://developers.google.com/maps/documentation/staticmaps/#StyledMaps" rel="noreferrer">(More documentation)</a></p>
  
  <p>So far, I've written this JavaScript to try and convert things, but it isn't working properly:</p>
  
  <pre><code>  function get_static_style(styles) {
      var result = '';
      styles.forEach(function(v, i, a){
        if (v.stylers.length &gt; 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);
    }
  </code></pre>
  
  <p>Alas, this code is outputting the following:</p>
  
  <p><img src="https://maps.googleapis.com/maps/api/staticmap?sensor=false&amp;center=51.5072,0.12750000000005457&amp;zoom=9&amp;size=400x400&amp;maptype=roadmap&amp;style=feature%3Awater%7Celement%3Aall%7Ccolor%3A0xd2dce6%7Cfeature%3Aadministrative.country%7Celement%3Ageometry%7Cweight%3A1%7Ccolor%3A0xd5858f%7Cfeature%3Aadministrative.country%7Celement%3Alabels.text.fill%7Ccolor%3A0x555555%7Cfeature%3Aadministrative%7Celement%3Ageometry.stroke%7Cvisibility%3Aoff%7Cfeature%3Aadministrative.country%7Celement%3Aall%7Cvisibility%3Aon%7Cfeature%3Aroad.highway%7Celement%3Aall%7Csaturation%3A-100%7Clightness%3A40%7Cvisibility%3Asimplified%7Cfeature%3Aroad.arterial%7Celement%3Aall%7Csaturation%3A-100%7Clightness%3A40%7Cvisibility%3Asimplified%7Cfeature%3Aroad.local%7Celement%3Aall%7Csaturation%3A-100%7Cvisibility%3Asimplified%7Cfeature%3Alandscape%7Celement%3Aall%7Chue%3A0xFFFFFF%7Csaturation%3A-100%7Clightness%3A100%7Cfeature%3Alandscape.natural%7Celement%3Ageometry%7Csaturation%3A-100%7Cfeature%3Alandscape.man_made%7Celement%3Ageometry.fill%7Cvisibility%3Asimplified%7Csaturation%3A-100%7Cfeature%3Apoi.park%7Celement%3Ageometry%7Csaturation%3A-100%7Clightness%3A60%7Cfeature%3Apoi%7Celement%3Ageometry%7Chue%3A0xFFFFFF%7Csaturation%3A-100%7Clightness%3A100%7Cvisibility%3Aoff%7" alt="Output"></p>
  
  <p>(Right-click and select "copy URL" to see the full path I'm using -- the above is direct from the static images API)</p>
  
  <p>...When instead it should look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/HTP0E.png" alt="London with style"></p>
  
  <p>Any ideas? Thanks!</p>