google-map-marker infoview template binding not working

27 views
Skip to first unread message

Ribukshin

unread,
Feb 9, 2016, 10:09:44 AM2/9/16
to Polymer
I have a custom element that wraps google-map-marker as below:

<dom-module id="my-map-marker">
  <template >
    <style>
      :host {
        display: block;
      }

      span {
        @apply(--paper-font-body1);
      }

      .markerinfo {
        margin: 2px;
      }
      .card-content {
        line-height: 70%;
      }
    </style>

    <google-map-marker id="marker" latitude="[[asset.latitude]]" longitude="[[asset.longitude]]" title="[[asset.name]]"
      icon="{{_getIcon(asset.speed, asset.lastUpdated, asset.heading, asset.status)}}"
      click-events="true">
      <paper-card class="markerinfo">
        <div class="card-content">
          <div>[[asset.id]]</div>
          <div>[[asset.speed]]</div>
          <div>[[asset.lastUpdated]]</div>
        </div>
      </paper-card>
    </google-map-marker>
  </template>

  <script>
    Polymer({
      is: 'my-map-marker',

      properties: {
        asset: {
          type: Object,
          observer: '_assetChanged'
        }
      },
      _assetChanged: function(newAsset, oldAsset) {
        this.asset = newAsset;
        
        this.$.marker.icon = this._getIcon(newAsset.speed, newAsset.lastUpdated, newAsset.heading, newAsset.status);
      },
      _getIcon: function(speed, lastUpdated, heading, status) {
        
        var iconPath = google.maps.SymbolPath.FORWARD_CLOSED_ARROW;
        var fillColor = '#0074BA';
        var strokeColor = '#0074BA';
        var scale = 5;

        var icon = {
          path: iconPath,
          rotation: heading,
          scale: scale,
          strokeWeight: 2,
          fillColor: fillColor,
          fillOpacity: 0.5,
          strokeColor: strokeColor
        };
        return icon;
      },
      ready: function() {
        console.log("marker ready");
      }
    });
  </script>
</dom-module>


This element is created pragmatically and added to google map. Clicking on the marker shows the infowindow as expected. However, subsequent changes to asset property don't reflect in infowindow. The location and icon changes work expected i.e. marker moves on the map.

This seems to be same as referred in https://github.com/GoogleWebComponents/google-map/issues/61 but the issue is closed. I tried with latest version of google-map element and the usecase is still not working for me.

Will appreciate any help on this topic.


Reply all
Reply to author
Forward
0 new messages