Mutation observer does not pick up changes with native shadow DOM  #299

Activity

1. mlisook commented on Jun 14, 2016

   

   mlisook

   on Jun 14, 2016

   Last edited by mlisook

   Contributor

   More actions

   +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
2. mlisook commented on Jun 15, 2016

   

   mlisook

   on Jun 15, 2016

   Contributor

   More actions

   BTW even the minimal functionality test in /test/markers-add-remove.html fails if you use shadow dom.
3. TheMoonDawg commented on Jul 13, 2016

   

   TheMoonDawg

   on Jul 13, 2016

   Last edited by TheMoonDawg

   More actions

   +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.
4. TheMoonDawg commented on Jul 14, 2016

   

   TheMoonDawg

   on Jul 14, 2016

   More actions

   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.
5. ibhi commented on Jul 31, 2016

   

   ibhi

   on Jul 31, 2016

   More actions

   +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
6. ziszo commented on Sep 5, 2016

   

   ziszo

   on Sep 5, 2016

   More actions

   Whenever the dom-repeat items changed, some of the info window has the same content as the old items.
7. Boscop commented on Oct 27, 2017

   

   Boscop

   on Oct 27, 2017

   More actions

   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>
8. ziszo commented on Oct 29, 2017

   

   ziszo

   on Oct 29, 2017

   Last edited by ziszo

   More actions

   @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.
9. Boscop commented on Nov 5, 2017

   

   Boscop

   on Nov 5, 2017

   More actions

   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..