<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.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.
Will appreciate any help on this topic.