update elements and fix some bugs

lib/src/google-map/google-map.html

 <!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
 
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../google-apis/google-maps-api.html">
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../iron-selector/iron-selector.html">
 <link rel="import" href="google-map-marker.html">
 <!--
 The `google-map` element renders a Google Map.
 
 <b>Example</b>:
 
     <style>
       google-map {
         height: 600px;
       }
@@ skipping 15 matching lines @@
       var map = document.querySelector('google-map');
       map.latitude = 37.77493;
       map.longitude = -122.41942;
       map.addEventListener('google-map-ready', function(e) {
         alert('Map loaded!');
       });
     </script>
 
 <b>Example</b> - with Google directions, using data-binding inside another Polymer element
 
-    <google-map map="{{map}}" libraries="places"></google-map>
+    <google-map map="{{map}}"></google-map>
     <google-map-directions map="{{map}}"
         start-address="San Francisco" end-address="Mountain View">
     </google-map-directions>
 
 @demo
 -->
 
 <dom-module id="google-map">
 
   <style>
@@ skipping 10 matching lines @@
       bottom: 0;
       left: 0;
     }
 
   </style>
   <template>
     <google-maps-api id="api"
       api-key="[[apiKey]]"
       client-id="[[clientId]]"
       version="[[version]]"
-      libraries="[[libraries]]"
       signed-in="[[signedIn]]"
       language="[[language]]"
       on-api-load="_mapApiLoaded"></google-maps-api>
 
     <div id="map"></div>
 
-    <content id="markers" select="google-map-marker"></content>
-
+    <iron-selector id="selector" multi="[[!singleInfoWindow]]" selected-attribute="open" activate-event="google-map-marker-open" on-google-map-marker-close="_deselectMarker">
+      <content id="markers" select="google-map-marker"></content>
+    </iron-selector>
+    <content id="objects" select="*"></content>
   </template>
 </dom-module>
 
 <script>
 
   Polymer({
 
     is: 'google-map',
 
 
@@ skipping 72 matching lines @@
       /**
        * A Maps API object.
        */
       map: {
         type: Object,
         notify: true,
         value: null
       },
 
       /**
-       * A comma separated list (e.g. "places,geometry") of libraries to load
-       * with this map. Defaults to "". For more information see
-       * https://developers.google.com/maps/documentation/javascript/libraries.
-       */
-      libraries: {
-        type: String,
-        value: ''
-      },
-
-      /**
        * A longitude to center the map on.
        */
       longitude: {
         type: Number,
         value: -122.41942,
         notify: true,
         reflectToAttribute: true
       },
 
       /**
@@ skipping 151 matching lines @@
         value: function() { return {}; }
       },
 
       /**
        * The markers on the map.
        */
       markers: {
         type: Array,
         value: function() { return []; },
         readOnly: true
+      },
+
+      /**
+       * The non-marker objects on the map.
+       */
+      objects: {
+        type: Array,
+        value: function() { return []; },
+        readOnly: true
+      },
+
+      /**
+       * If set, all other info windows on markers are closed when opening a new one.
+       */
+      singleInfoWindow: {
+        type: Boolean,
+        value: false
       }
-
     },
 
     behaviors: [
       Polymer.IronResizableBehavior
     ],
 
     listeners: {
       'iron-resize': 'resize'
     },
 
     observers: [
       '_debounceUpdateCenter(latitude, longitude)'
     ],
 
     attached: function() {
       this._initGMap();
     },
 
     detached: function() {
       if (this._mutationObserver) {
         this._mutationObserver.disconnect();
         this._mutationObserver = null;
       }
+      if (this._objectsMutationObserver) {
+        this._objectsMutationObserver.disconnect();
+        this._objectsMutationObserver = null;
+      }
     },
 
     _initGMap: function() {
       if (this.map) {
         return; // already initialized
       }
       if (this.$.api.libraryLoaded !== true) {
         return; // api not loaded
       }
       if (!this.isAttached) {
         return; // not attached
       }
 
       this.map = new google.maps.Map(this.$.map, this._getMapOptions());
       this._listeners = {};
       this._updateCenter();
       this._loadKml();
       this._updateMarkers();
+      this._updateObjects();
       this._addMapListeners();
       this.fire('google-map-ready');
     },
 
     _mapApiLoaded: function() {
       this._initGMap();
     },
 
     _getMapOptions: function() {
       var mapOptions = {
@@ skipping 12 matching lines @@
       // We use getAttribute here because the default value of this.draggable = false even when not set.
       if (this.getAttribute('draggable') != null) {
         mapOptions.draggable = this.draggable
       }
       for (var p in this.additionalMapOptions)
         mapOptions[p] = this.additionalMapOptions[p];
 
       return mapOptions;
     },
 
-    // watch for future updates
+    _attachChildrenToMap: function(children) {
+      if (this.map) {
+        for (var i = 0, child; child = children[i]; ++i) {
+          child.map = this.map;
+        }
+      }
+    },
+
+    // watch for future updates to marker objects
     _observeMarkers: function() {
       // Watch for future updates.
       if (this._mutationObserver) {
         return;
       }
-      this._mutationObserver = new MutationObserver( this._updateMarkers.bind(this));
-      this._mutationObserver.observe(this, {
+      this._mutationObserver = new MutationObserver(this._updateMarkers.bind(this));
+      this._mutationObserver.observe(this.$.selector, {
         childList: true
       });
     },
 
     _updateMarkers: function() {
       var newMarkers = Array.prototype.slice.call(
           Polymer.dom(this.$.markers).getDistributedNodes());
 
       // do not recompute if markers have not been added or removed
       if (newMarkers.length === this.markers.length) {
         var added = newMarkers.filter(function(m) {
           return this.markers && this.markers.indexOf(m) === -1;
         }.bind(this));
         if (added.length === 0) {
           // set up observer first time around
           if (!this._mutationObserver) {
             this._observeMarkers();
           }
           return;
         }
       }
 
       this._observeMarkers();
 
       this.markers = this._setMarkers(newMarkers);
 
       // Set the map on each marker and zoom viewport to ensure they're in view.
-      if (this.markers.length && this.map) {
-        for (var i = 0, m; m = this.markers[i]; ++i) {
-          m.map = this.map;
-        }
-      }
+      this._attachChildrenToMap(this.markers);
       if (this.fitToMarkers) {
         this._fitToMarkersChanged();
       }
     },
 
+    // watch for future updates to non-marker objects
+    _observeObjects: function() {
+      if (this._objectsMutationObserver) {
+        return;
+      }
+      this._objectsMutationObserver = new MutationObserver(this._updateObjects.bind(this));
+      this._objectsMutationObserver.observe(this, {
+        childList: true
+      });
+    },
+
+    _updateObjects: function() {
+      var newObjects = Array.prototype.slice.call(
+          Polymer.dom(this.$.objects).getDistributedNodes());
+
+      // Do not recompute if objects have not been added or removed.
+      if (newObjects.length === this.objects.length) {
+        var added = newObjects.filter(function(o) {
+          return this.objects.indexOf(o) === -1;
+        }.bind(this));
+        if (added.length === 0) {
+          // Set up observer first time around.
+          this._observeObjects();
+          return;
+        }
+      }
+
+      this._observeObjects();
+      this._setObjects(newObjects);
+      this._attachChildrenToMap(this.objects);
+    },
+
     /**
      * Clears all markers from the map.
      *
      * @method clear
      */
     clear: function() {
       for (var i = 0, m; m = this.markers[i]; ++i) {
         m.marker.setMap(null);
       }
     },
@@ skipping 156 matching lines @@
       switch (attrName) {
         case 'draggable':
           this.map.setOptions({draggable: this.draggable});
           break;
       }
     },
 
     _fitToMarkersChanged: function() {
       // TODO(ericbidelman): respect user's zoom level.
 
-      if (this.map && this.fitToMarkers) {
+      if (this.map && this.fitToMarkers && this.markers.length > 0) {
         var latLngBounds = new google.maps.LatLngBounds();
         for (var i = 0, m; m = this.markers[i]; ++i) {
           latLngBounds.extend(
               new google.maps.LatLng(m.latitude, m.longitude));
         }
 
         // For one marker, don't alter zoom, just center it.
         if (this.markers.length > 1) {
           this.map.fitBounds(latLngBounds);
         }
 
         this.map.setCenter(latLngBounds.getCenter());
       }
     },
 
     _addMapListeners: function() {
       google.maps.event.addListener(this.map, 'center_changed', function() {
         var center = this.map.getCenter();
         this.latitude = center.lat();
         this.longitude = center.lng();
       }.bind(this));
 
       google.maps.event.addListener(this.map, 'zoom_changed', function() {
         this.zoom = this.map.getZoom();
       }.bind(this));
-      
+
       google.maps.event.addListener(this.map, 'maptypeid_changed', function() {
         this.mapType = this.map.getMapTypeId();
       }.bind(this));
 
       this._clickEventsChanged();
       this._dragEventsChanged();
       this._mouseEventsChanged();
     },
 
     _clearListener: function(name) {
       if (this._listeners[name]) {
         google.maps.event.removeListener(this._listeners[name]);
         this._listeners[name] = null;
       }
     },
 
     _forwardEvent: function(name) {
       this._listeners[name] = google.maps.event.addListener(this.map, name, function(event) {
         this.fire('google-map-' + name, event);
       }.bind(this));
-    }
+    },
+
+   _deselectMarker: function(e, detail) {
+     // If singleInfoWindow is set, update iron-selector's selected attribute to be null.
+     // Else remove the marker from iron-selector's selected array.
+     var markerIndex = this.$.selector.indexOf(e.target);
+
+     if (this.singleInfoWindow) {
+      this.$.selector.selected = null;
+     } else if (this.$.selector.selectedValues) {
+      this.$.selector.selectedValues = this.$.selector.selectedValues.filter(function(i) {return i !== markerIndex});
+     }
+   }
 
   });
 
 </script>