javascript - Binding an array of objects to template containing google-map-marker elements -

i have <dom-module> property locations of type array updated externally every once in while:

<dom-module id="my-map">     <template>         <google-map api-key="my_api_key" id="map" libraries="visualization,geometry,drawing">             <template is="dom-repeat" items="{{locations}}" as="user">                 <template is="dom-repeat" items="{{user.trace}}">                     <google-map-marker latitude="{{item.latitude}}" longitude="{{item.longitude}}">                     </google-map-marker>                 </template>             </template>         </google-map>     </template> </dom-module> <script> polymer({     : 'my-map',     properties : {         locations : {             type : array,             value : [],             observer : '_locationschanged'         }     },     ready : function(){         var self = this;         this.map = this.queryselector('google-map');         this.map.addeventlistener('google-map-ready',function(){             // styling happening here.         });     },     _locationschanged : function(newlocations, oldlocations){         // fires correctly! ...     } }); </script> 

in module, send ajax request retrieve data shown markers on map. once request finishes, update locations property , _locationschanged callback fires fine.

the data in case looks this:

[       {         "_id":"someid1",       "trace":[           {             "latitude":55.629215086862,           "longitude":10.640099246067,         }       ]     },     {         "_id":"someid2",       "trace":[           {             "latitude":50.14743798944287,           "longitude":18.52913082363756,         }       ]     } ] 

something weird happens.

whenever locations empty array, newlocations bound without problems <template dom-repeat="{{locations}}"> element. however, if map had shown couple of markers, old <google-map-marker> objects still there, new ones added. if in dev console document.queryselectorall('google-map-marker') after update locations, see both newlocations and oldlocations.

to test data-binding works correctly if applied outside <google-map> element, added similar template. here, works expected:

<template is="dom-repeat" items="{{locations}}" as="user">     <ul>         <li>             <span>{{user._id}}</span>             <ul>                 <template is="dom-repeat" items="{{user.trace}}" as="trace">                     <li><span>lat:</span><span>{{trace.latitude}}</span></li>                 </template>             </ul>         </li>     </ul> </template> 

here's did not far:

• calling clear() on googlemap object.
• creating second property bound dom-repeat template, accessed this way:

    this.splice('_locations',0,this._locations.length);     newlocations.foreach(function(location){         self.push('_locations',location);     }); 

• using one-way data binding.
• manually removing dom nodes via googlemap.removechild(marker) , adding them. okay, worked degree isn't whole point of data-binding don't have this?

so, sum up: <template is="dom-repeat"> inside google map does not notified correctly changes locations property. can tell me i'm doing wrong or if data-binding not work inside <google-map> element? mixing things shady / shadow dom? using dom-repeat thing incorrectly? going lose mind? i'll appreciate hint towards solution. thanks!

i not sure if makes difference specific problem default values arrays , objects should specified in format (see value attribute) :

 properties : {         locations : {             type : array,             value : function() { return [];},             observer : '_locationschanged'         }     }, 

i think have call clear() on google-map element because _updatemarkers() function not (see here)