google-map-marker content does not update in dom-repeat

[mchp]

Create some google-map-marker with content (infowindow) via dom-repeat template bounded to a data array. When the bound data changes, the position of all the markers are updated, but the contents are not.

I think this is because dom-repeat efficiently reuses existing doms. When google-map calls _attachChildrenToMap, child.map could already be set to the current map. Since the value is not updated, google-map-marker's _mapChanged and indirectly _contentChanged method is never called.

The MutationObserver attached in _contentChanged is also never fired because of this.

Example

      <template is="dom-repeat" items="[[data]]">
        <google-map-marker latitude="[[item.latitude]]" longitude="[[item.longitude]]">
          [[item.details]]
        </google-map-marker>
    </google-map>

  Polymer({
    properties: {
       data: {
         type: Array,
         value: [{
           latitude: 10.0,
           longitude: 10.0,
           details: "OLD VALUE",
         }]
       }
    },
    ready: function() {
      this.data = [{
        latitude: 20.0,
        longitude: 20.0,
        details: "CURRENT VALUE"
      }];
    }
  })

[ebidel]

I believe this is related to https://github.com/GoogleWebComponents/google-map/issues/168. Namely, data binding does not work properly in the marker's info window. That's because, currently, the info window uses the imperative Maps API to create it. Changes after the first setup are not detected.

[framled]

I had the same issue... the info window doesn't render properly when use a filter on a dom-repeat I just use a patch solution for fixit...

my solution: every time when the user click on a google-map-marker element, create a new info window.

var marker = event.target.marker;
var item= event.model.item;
var contentString = "<span>" + item.location + "</span>;
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
infowindow.open(this.$.googleMap.map, marker);
lastOpened = infowindow;

[thexs-dev]

this might be related with pull 294? https://github.com/GoogleWebComponents/google-map/pull/294

I am using that patch and it's working fine, so far

[mabeing1]

I found the solution by simply adding the map = {{map}} property to the google-map and google-map-market elements <google-map id="map" map={{map}}> <template is="dom-repeat" items="[[data]]"> <google-map-marker map={{map}} latitude="[[item.latitude]]" longitude="[[item.longitude]]"> [[item.details]] </google-map-marker> </template> </google-map>

[cbald24]

I know this is unrelated but how did you guys make it so your map-marker locations would update. I currently have a polymer project where we want our map marker's to auto update their position every few seconds. we know it gets the new position correctly but doesn't visually update on the map. trying to use the marker's to track moving objects, and this has been our biggest hurdle

[framled]

@cbald24 you can do it with a setTimeout(function(){updateMarkers()}, 3000);