Polymer Google Maps Directions renderer-options property

     <google-map-directions map="{{map}}"
     renderer-options="{{draggable:true,polylineOptions:{draggable:true,strokeColor:#000000}}}"
  start-address="{{item.startAddress}}"
  end-address="{{item.endAddress}}"
  travel-mode="DRIVING"
  waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'></google-map-directions>

Is that the correct way to use the renderOptions property of the google-map-directions element? I can see any examples of how to use this option. Please provide one. My goal is to change the color of the polylines but I can not get any of the options to work.

Solution

Polymer interprets double-brackets as a data binding (and in this case, it's an invalid one):

<google-map-directions
  renderer-options="{{draggable:true,polylineOptions:{draggable:true,strokeColor:#000000}}}"
  ... >

For Polymer to deserialize a JSON string into an object, the string must be properly formatted using JSON syntax, or else the string is taken literally. These two JSON format rules are important to remember:

The key of a member should be contained in double quotes

The value of a member must be contained in double quotes if it's a string

Using these rules, the correct version of your renderer-options would be:

<google-map-directions
  renderer-options='{"draggable":true, "polylineOptions":{"draggable":true, "strokeColor":"#FF0000"}}'
  ... >

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="google-map/google-map.html">
  <link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
  <style>
    google-map {
    height: 600px;
    }
  </style>
  <template is="dom-bind">
    <google-map-directions map="{{map}}"
                           start-address="San Francisco"
                           end-address="Mountain View"
                           travel-mode="BICYCLING"
                           renderer-options='{"draggable":true, "polylineOptions":{"draggable":true, "strokeColor":"#FF0000"}}'
                           waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'></google-map-directions>
    <google-map map="{{map}}" latitude="37.779"
                longitude="-122.3892"></google-map>
  </template>
</body>

^codepen

Note the object deserialized from the renderer-options attribute should meet the DirectionsRendererOptions object specification.

You might run into a case where the complexity of your options required an unwieldy (or unmaintainable) JSON string in your markup, in which case setting renderer-options imperatively could be a better choice:

// Declare <google-map-directions id="dir" ...> (without renderer-options attribute).
// Then, setup the options in your custom element's ready-callback.
Polymer({
  is: 'x-foo',
  ready: function() {
    this.$.dir.rendererOptions = {
      draggable: true,
      polylineOptions: {
        draggable: true,
        strokeColor: '#FF0000'
      }
    };
  }
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="google-map/google-map.html">
  <link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
  <x-foo></x-foo>
  
  <dom-module id="x-foo">
    <style>
      google-map {
        height: 600px;
      }
    </style>
    <template>
      <google-map-directions id="dir" map="{{map}}"
          start-address="San Francisco"
          end-address="Mountain View"
          travel-mode="BICYCLING"
          waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'></google-map-directions>
      <google-map map="{{map}}" latitude="37.779"
                  longitude="-122.3892"></google-map>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          ready: function() {
            this.$.dir.rendererOptions = {
              draggable: true,
              polylineOptions: {
                draggable: true,
                strokeColor: '#FF0000'
              }
            };
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen