[google-map-marker] Info window not populated properly

[eterna2]

trafficstars

Basically I create a google-map-markers component to render an array of points. However, I have some problem getting the infowindow to work.

It seems the data-binding is not working properly as the marker displays "Hint: BLANK", instead of "Hint: SOMETHING".

  <template>
    <template is="dom-repeat" items="{{stops}}">
      <google-map-marker 
        map="{{map}}" 
        latitude="{{item.lat}}" 
        longitude="{{item.lng}}" 
        title="{{item.hint}}">Hint: <span>{{item.hint}}</span></google-map-marker>
    </template>
  </template>

[atotic]

Can you create a self-contained example? jsbin, or a gist.

[eterna2]

I have found out the problem. This error only happens when there are async data request.

The gist demonstrate a sync and an async version.

https://gist.github.com/eterna2/2c18ff296bc093ced3af

[atotic]

Two things:

• you are not using the API as intended. google-map-markers are supposed to be direct children of google-map. If they are, this might fix your bug.
• as is, your markers are never imported into the DOM tree. My guess is that this is triggering a core bug that I am still investigating. Will need help from core team on this one.

[kamronbatman]

I think I had a similar problem when I used iron-ajax to get data and updated the object that is bound to the infowindow.

In my case, I was pulling address information from Lat/Lng. The address is present in a card that displays when I click the marker, but not the infowindow itself.

As a workaround, I added the marker to the array bound to the dom-repeat only after the iron-ajax call was completed.