Added iron-selector to enable singleInfoWindow property

Implemented the singleInfoWindow property by using iron-selector and two new events: google-map-marker-open and google-map-marker-close.
GoogleWebComponents · Oct 5, 2015 · d125811 · d125811
1 parent eb85e76
commit d125811
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 8 deletions.
diff --git a/bower.json b/bower.json
@@ -31,6 +31,7 @@
     "polymer": "Polymer/polymer#^1.1.4",
     "google-apis": "GoogleWebComponents/google-apis#^1.1.1",
     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
+    "iron-selector": "PolymerElements/iron-selector#^1.0.0"
   },
   "devDependencies": {
     "web-component-tester": "*",

diff --git a/google-map-marker.html b/google-map-marker.html
@@ -114,7 +114,14 @@
      * @event google-map-marker-rightclick
      * @param {google.maps.MouseEvent} event The mouse event.
      */
-
+    /**
+     * Fired when an infowindow is opened.
+     * @event google-map-marker-open
+     */
+    /**
+     * Fired when the close button of the infowindow is pressed.
+     * @event google-map-marker-close
+     */ 
     properties: {
       /**
        * A Google Maps marker object.
@@ -202,6 +209,15 @@
         type: String,
         value: null,
         observer: '_animationChanged'
+      },
+
+      /**
+       * Specifies whether the InfoWindow is open or not
+       */
+      open: {
+        type: Boolean,
+        value: false,
+        observer: '_openChanged'
       }
     },
 
@@ -222,6 +238,8 @@
       if (this.marker) {
         this.marker.setMap(this.map);
       }
+      if (this.open)
+        this.fire('google-map-marker-open');
     },
 
     _updatePosition: function() {
@@ -310,20 +328,35 @@
         if (!this.info) {
           // Create a new infowindow
           this.info = new google.maps.InfoWindow();
-          this.infoHandler_ = google.maps.event.addListener(this.marker, 'click', function() {
-            this.info.open(this.map, this.marker);
+          this.openInfoHandler_ = google.maps.event.addListener(this.marker, 'click', function() {
+            this.fire('google-map-marker-open');
+          }.bind(this));
+
+          this.closeInfoHandler_ = google.maps.event.addListener(this.info, 'closeclick', function() {
+            this.fire('google-map-marker-close');
           }.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.infoHandler_);
+          google.maps.event.removeListener(this.openInfoHandler_);
+          google.maps.event.removeListener(this.closeInfoHandler_);
           this.info = null;
         }
       }
     },
 
+    _openChanged: function() {
+      if (this.info) {
+        if (this.open) {
+          this.info.open(this.map, this.marker);
+        } else {
+          this.info.close();
+        }
+      }
+    },
+
     _mapReady: function() {
       this._listeners = {};
       this.marker = new google.maps.Marker({
@@ -343,6 +376,7 @@
       this._clickEventsChanged();
       this._contentChanged();
       this._mouseEventsChanged();
+      this._openChanged();
       setupDragHandler_.bind(this)();
     },
 

diff --git a/google-map.html b/google-map.html
@@ -3,6 +3,7 @@
 <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.
@@ -74,8 +75,9 @@
       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>
 
   </template>
 </dom-module>
@@ -340,8 +342,15 @@
         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: [
@@ -683,7 +692,20 @@
       this._listeners[name] = google.maps.event.addListener(this.map, name, function(event) {
         this.fire('google-map-' + name, event);
       }.bind(this));
-    }
+    },
+
+   _deselectMarker: function(e) { 
+     // If singleInfoWindow is set, update core-selector's selected attribute to be null.
+     // Else remvoe the marker from core-selector's selected array.
+     var markerSelector = this.$.selector;
+     var markerIndex = markerSelector.items.indexOf(e.target);
+
+     if (this.singleInfoWindow) {
+      markerSelector.selected = null;
+     } else {
+      markerSelector.selectedValues = markerSelector.selectedValues.filter(function(i) {return i != markerIndex});
+     }
+   }
 
   });