Mutation observer does not pick up changes with native shadow DOM

[marcushellberg]

It seems that with native Shadow DOM enabled, markers added to a map with a <dom-repeat> do not get picked up. With shady DOM, it works as expected.

Here is a JS Bin showing the issue: http://jsbin.com/sufexuhoba/edit?html,output

[mlisook]

+1 for @vaadin-marcus ...

As far as I can tell, what's happening is the mutationObserver at google-map.html 468-470:

this._mutationObserver.observe(this.$.selector, {
        childList: true
      });

is watching an iron-selector that refers to the markers, not the markers themselves. In shady dom the iron-selector's direct children are the google-map-markers. In shadow dom there is just one direct child, the <content> tag. The content tag doesn't change and we never get to 496 this._attachChildrenToMap(this.markers); which just sets the map object in the google-map-marker.

Since all this serpentine code is just setting the map on the google-map-marker, for now a workaround may be to just data bind it in:
(changes @vaadin-marcus sample jsbin)

<google-map map="{{map}}" fit-to-markers>
      <template is="dom-repeat" items="[[locations]]">
        <google-map-marker map="[[map]]" latitude="[[item.lat]]" longitude="[[item.lon]]"></google-map-marker>
      </template>
    </google-map>
    <paper-button on-tap="setMarkers">Set markers</paper-button>
  </template>
  <script>
    Polymer({
      is: 'maps-demo', 
      properties: {
        locations: Array,
        map: Object
      },

which does seem to work in both shadow and shady. See JS Bin workaround http://jsbin.com/gedulog/edit?html,output

[mlisook]

BTW even the minimal functionality test in /test/markers-add-remove.html fails if you use shadow dom.

[TheMoonDawg]

+1 for mlisook!

I have markers being dynamically added from data returned from our database. Whenever the map finished rendering before the markers, they never showed up. Your workaround did the trick!

However, the map doesn't seem to resize correctly around the new markers. For right now, I've just been settings the map's lon/lat to focus around the first marker.

[TheMoonDawg]

mlisook's workaround unfortunately does not work for the info window text if we use data binding to populate it.

This will populate the info window because it's static.
<google-map-marker map="[[map]]" latitude="[[item.lat]]" longitude="[[item.lon]]">This is static text, so this will populate the info window.</google-map-marker>

Data binding will not work to populate the info window.
<google-map-marker map="[[map]]" latitude="[[item.lat]]" longitude="[[item.lon]]">[[item.description]]</google-map-marker>

I also discovered that Streets view does not work at all with the native shadow DOM.

[ibhi]

+1 for @MoonDawg92
I also have the same issue. After adding the markers dynamically from database(simulated with setTimeout), the map doesn't resize. https://jsbin.com/jusara/edit?html,output

[ziszo]

Whenever the dom-repeat items changed, some of the info window has the same content as the old items.

[Boscop]

map="[[map]]" doesn't work for me, it doesn't redraw my polylines when data changes..
And it doesn't fit to markers when data changes either.
What am I doing wrong?

<google-map id="gmap" map="{{map}}" fit-to-markers api-key="foo">
  <template is="dom-repeat" items="[[places_res]]" as="place">
    <google-map-marker map="[[map]]" latitude="[[place.latitude]]" longitude="[[place.longitude]]"
      title="[[place.unique_id]]"
      icon="https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
    >
    </google-map-marker>
  </template>
  <template is="dom-repeat" items="[[trucks_res]]" as="truck">
    <google-map-marker map="[[map]]" latitude="[[truck.location.latitude]]" longitude="[[truck.location.longitude]]"
      title="[[truck.unique_id]]: [[truck.driver_name]]"
      icon="/images/truck.png"
    >
    </google-map-marker>
    <template is="dom-repeat" items="[[trucks_res]]" as="truck">
      <google-map-poly map="[[map]]" stroke-color="blue" fill-opacity=".5">
        <google-map-point map="[[map]]" latitude="[[truck.location.latitude]]" longitude="[[truck.location.longitude]]"></google-map-point>
        <template is="dom-repeat" items="[[truck.route]]" as="location">
          <google-map-point map="[[map]]" latitude="[[location.latitude]]" longitude="[[location.longitude]]"></google-map-point>
        </template>
      </google-map-poly>
    </template>
  </template>
</google-map>

[ziszo]

@Boscop: I moved google-map folder from bower_components into a separate folder in src. Then modified the google-map element's code instead. I can't trace the changes I made anymore, but what I can remember: I changed the markers property's notify to true so I can observe the markers from the element where I included the google-map.

Just make sure that you don't import google-map from bower_components folder so it will not result to element duplicate definition.

If changing the property that you need to observe won't do, try to render() the dom-repeat that you have.

[Boscop]

But what does it help to be able to observe the marker changes? The <google-map> element doesn't change the markers. And I did call render() in an async loop with setInterval() but it didn't change the result.

The map still doesn't update when the google-map-points change..