dom-repeat and google-map-marker problem

[MeloJR]

I have the following snippet:

<google-map id="map" latitude="{{center.lat}}" longitude="{{center.lng}}" click-events on-google-map-click='handleMapClick'>
  <template is="dom-repeat" items="{{spots}}">
    <google-map-marker click-events latitude="{{item.lat}}" longitude="{{item.lng}}" on-google-map-marker-click='handleSpotTap'></google-map-marker>
  </template>
</google-map>

was trying to add a google-map-marker in my map when the user click in it so the handleMapClick function is as follows:

handleMapClick: function(event, detail) {
    var newSpot = {lat: detail.latLng.lat(), lng: detail.latLng.lng()};
    this.push('spots', newSpot);
    this.$.map.resize();  // I don't know if it is necessary
}

with this function the new google-map-marker are added to the DOM (although they are added doubled) but the map doesn't show them.

I try another approach that seems to work:

handleMapClick: function(event, detail) {
     var marker = document.createElement("google-map-marker");
     marker.latitude = detail.latLng.lat();
     marker.longitude = detail.latLng.lng();
     Polymer.dom(this.$.map).appendChild(marker);
}

I checked that the _updateMarkers method of google-map is executed with both approaches but only works with the first. What is the problem with the first approach?

Thank you.

[atotic]

You can't manually add an item to a dom-repeat template. It gets generated, and regenerated automatically from an array.

[MeloJR]

I haven't added an item manually to the DOM template, I have used the Polymer API to modify arrays (in the first approach):
this.push('array', elementToPush)

P.S. I had a mistake in my last comment, the approach that works is the second one.

[atotic]

You are right, you did do the right thing. If the element was in dom, it should have been picked up by mutationobserver, and added to map. Who knows, if you'd like to pursue this, create a jsbin somewhere, and I can trace it through.

[ibhi]

@atotic
I am facing the same issue. Here is a jsbin(https://jsbin.com/qorowo/edit?html,output) where, I have reproduced the issue. The issue is, inside the dom-repeat, the property binding for latitude and longitude for the google-map-marker is not working, if the data for binding is async(populated, from database etc.,). However, the title property binding is working(its really weird). When I remove theshadow dom strategy, the same code works fine.
I think it is related to #299