This repository was archived by the owner on Apr 19, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 19, 2026. It is now read-only.
google-map-marker content does not update in dom-repeat #263
Description
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"
}];
}
})
Activity
ebidel commentedon Feb 26, 2016
I believe this is related to #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 commentedon Jun 2, 2016
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.
thexs-dev commentedon Jun 3, 2016
this might be related with pull 294?
#294
I am using that patch and it's working fine, so far
mabeing1 commentedon Nov 2, 2016
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 commentedon Nov 7, 2016
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 commentedon Nov 7, 2016
@cbald24 you can do it with a
setTimeout(function(){updateMarkers()}, 3000);