Generating Google map markers via iterating over an array using data-binding, Why am I losing my infowindow and/or click events on data update?

Question

Using google-map v1.1.10 against git://github.com/GoogleWebComponents/google-map.git#*

I build up my markers like so:

<template>
   <site-data sites="{{sites}}"> </site-data>
   <google-map fit-to-markers >
   <template is="dom-repeat" items="{{sites}}">
    <template is="dom-repeat" items="{{item}}">
      <google-map-marker latitude={{item.latitude}}
                         longitude={{item.longitude}}
                         title="{{item.project_name}}"
                         >
        <h1>{{item.project_name}}</h1>
        <p style="margin: 0;">Location: <b>{{item.town}}, {{item.country}}</b></p>
        <p style="margin: 0;">Tech Description: <b>{{item.tech_desc}}</b></p>
      </google-map-marker>
    </template>
  </template>
</google-map>

Upon initial loading of the webapp, things work really well. I can click on a marker and the infowindow shows the content. However, if I change any values in my sites array, I seem to lose the infowindow and/or the click event. I have to refresh the browser to get back to my initial condition (click to show infowindow).

Also, The marker locations will update perfectly if I change lat/long and hovering shows tooltip aka. title, appropriately as well.

I've added a click event which calls a console.log to the click event. It works well until a value is changed in the {{sites}} binding, so it seem I am losing click events when the google-map updates itself?

There are no scripts in this element.

If I can provide more information, please let me know.

Thanks in Advance, Scott

Answer 1

It looks like there are some problems with GoogleMapMarker. I have some hacks you can try, but you should make an issue ticket so somebody can take a deeper look.

One problem is that the MutationObserver that updates MapMarker is not observing characterData, so it doesn't fire when MapMarker's simple text content changes.

Another problem is that the attach/detach implementations don't seem to be complementary. For example, detach removes the MutationObserver and attach never puts it back.

Lastly, there are cases when the info window become disconnected from the MapMarker.

Here is a JSBin where there are three kinds of mutations of a GoogleMapMarker setup as you described: http://jsbin.com/hobixi/edit?html.

• Adding a new map marker seems to work just fine.

• Modifying content of an existing marker fails because of the MutationObserver problem I described. I fixed that by monkey patching GoogleMapMarker's _contentChanged method like so:

Example:

marker._contentChanged = function() {
  if (this._contentObserver)
    this._contentObserver.disconnect();
    // Watch for future updates.
    this._contentObserver = new MutationObserver( this._contentChanged.bind(this));
    this._contentObserver.observe( this, {
      childList: true,
      subtree: true,
      ///----------------
      // monkey patch 
      characterData: true
      //-----------------
    });
 ...

• Lastly, I artificially made an example that removes a marker from DOM and puts it back. This fails as described above, so I monkey patched attached and detached like so:

Example:

  marker.detached = function() {
    if (this.marker) {
      google.maps.event.clearInstanceListeners(this.marker);
      this._listeners = {};
      this.marker.setMap(null);
      ///----------------
      // monkey patch 
      this.info = null;
      //-----------------
    }
    if (this._contentObserver)
      this._contentObserver.disconnect();
  };
  marker.attached = function() {
    // If element is added back to DOM, put it back on the map.
    if (this.marker) {
      this.marker.setMap(this.map);
      ///----------------
      // monkey patch 
      this._contentChanged();
      //-----------------
    }
  };

You didn't specify the nature of the changes you are triggering. The clicking doesn't show the info window problem seems to be what happens when the Marker and the Info become discombobulated, maybe there is an attach/detach happening.

Well played baiting me to look into this. :)