Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<head>
  
  <meta name="description" content="Updating GoogleMapMarker Content">
  <meta charset="utf-8">
​
  <base href="http://polygit.org/components/">
​
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="google-map/google-map.html" rel="import">
  
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
​
</head>
<body>
​
<x-example></x-example>
  
<dom-module id="x-example">
  <style>
    
    :host {
      display: block;
    }
    google-map {
      width: 300px;
      height: 300px;
    }
    
  </style>
  <template>
    
    <site-data sites="{{sites}}"> </site-data>
    <google-map fit-to-markers >
      <template is="dom-repeat" items="{{sites}}" as="site">
        <template is="dom-repeat" items="{{site}}">
          <google-map-marker id="{{item.project_name}}" 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;" foo$="{{item.tech_desc}}">Tech Description: <b>{{item.tech_desc}}</b></p>
          </google-map-marker>
        </template>
      </template>
    </google-map>    
    <hr>
    <button on-tap="moar">Moar Election</button>
    <button on-tap="change">Change Tech</button>
    <button on-tap="reattach">Re-attach</button>
  </template>
  <script>
    
    // only need this when in the main document and on non-Chrome
    addEventListener('WebComponentsReady', function() {
      
      var marker = document.createElement('google-map-marker').__proto__;
      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
          //-----------------
        });
        var content = this.innerHTML.trim();
        if (content) {
          if (!this.info) {
            // Create a new infowindow
            this.info = new google.maps.InfoWindow();
            this.openInfoHandler_ = google.maps.event.addListener(this.marker, 'click', function() {
              this.open = true;
            }.bind(this));
            this.closeInfoHandler_ = google.maps.event.addListener(this.info, 'closeclick', function() {
              this.open = false;
            }.bind(this));
          }
          this.info.setContent(content);
        } else {
          if (this.info) {
            // Destroy the existing infowindow.  It doesn't make sense to have an empty one.
            google.maps.event.removeListener(this.openInfoHandler_);
            google.maps.event.removeListener(this.closeInfoHandler_);
            this.info = null;
          }
        }
      };
      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();
          //-----------------
        }
      };
      
      Polymer({
        is: 'x-example',
        properties: {
          sites: {
            value: function() {
              return [[
                {project_name: "IA", latitude: 41.9349079, longitude:-94.5121359, town: 'Up', country: 'US', tech_desc: 44},
                {project_name: "NH", latitude: 43.9977267, longitude:-72.7009582, town: 'Down', country: 'Pastoral'}
              ]];  
            }
          }
        },
        moar: function() {
          this.push('sites', [{project_name: "SC", latitude: 33.6222803, longitude:-82.0681717}]);
        },
        change: function() {
          this.set('sites.0.0.tech_desc', String(Math.floor((Math.random()+1)*2000)));
        },
        reattach: function() {
          var node = this.$$('#IA');
          var parent = node.parentElement;
          node.remove();
          parent.appendChild(node);
        }
      });
      
    });
    
  </script>
</dom-module>
  
</body>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sjmilespro
0viewers