update elements and fix some bugs

lib/src/google-map/google-map-marker.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">
 
 <!--
 The `google-map-marker` element represents a map marker. It is used as a
 child of `google-map`.
 
 <b>Example</b>:
@@ skipping 24 matching lines @@
 <dom-module id="google-map-marker">
   <style>
     :host {
       display: none;
     }
   </style>
   <template><content></content></template>
 </dom-module>
 
 <script>
+(function() {
 
-(function() {
+  function setupDragHandler_() {
+    if (this.draggable) {
+      this.dragHandler_ = google.maps.event.addListener(
+          this.marker, 'dragend', onDragEnd_.bind(this));
+    } else {
+      google.maps.event.removeListener(this.dragHandler_);
+      this.dragHandler_ = null;
+    }
+  }
+
+  function onDragEnd_(e, details, sender) {
+    this.latitude = e.latLng.lat();
+    this.longitude = e.latLng.lng();
+  }
+
   Polymer({
 
     is: 'google-map-marker',
 
     /**
      * Fired when the marker icon was clicked. Requires the clickEvents attribute to be true.
      * @param {google.maps.MouseEvent} event The mouse event.
      * @event google-map-marker-click
      */
+
     /**
      * Fired when the marker icon was double clicked. Requires the clickEvents attribute to be true.
      * @param {google.maps.MouseEvent} event The mouse event.
      * @event google-map-marker-dblclick
      */
+
     /**
      * Fired for a mousedown on the marker. Requires the mouseEvents attribute to be true.
      * @event google-map-marker-mousedown
      * @param {google.maps.MouseEvent} event The mouse event.
      */
+
     /**
      * Fired when the DOM `mousemove` event is fired on the marker. Requires the mouseEvents
      * attribute to be true.
      * @event google-map-marker-mousemove
      * @param {google.maps.MouseEvent} event The mouse event.
      */
+
     /**
      * Fired when the mouse leaves the area of the marker icon. Requires the mouseEvents attribute to be
      * true.
      * @event google-map-marker-mouseout
      * @param {google.maps.MouseEvent} event The mouse event.
      */
+
     /**
      * Fired when the mouse enters the area of the marker icon. Requires the mouseEvents attribute to be
      * true.
      * @event google-map-marker-mouseover
      * @param {google.maps.MouseEvent} event The mouse event.
      */
+
     /**
      * Fired for a mouseup on the marker. Requires the mouseEvents attribute to be true.
      *
      * @event google-map-marker-mouseup
      * @param {google.maps.MouseEvent} event The mouse event.
      */
+
     /**
      * Fired for a rightclick on the marker. Requires the clickEvents attribute to be true.
      * @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.
        * @type google.maps.Marker
        */
       marker: Object,
 
       /**
        * The Google map object.
        * @type google.maps.Map
@@ skipping 49 matching lines @@
       },
 
       /**
        * The marker's longitude coordinate.
        */
       longitude: {
         type: Number,
         value: null,
         reflectToAttribute: true
       },
+
       /**
        * The marker's latitude coordinate.
        */
       latitude: {
         type: Number,
         value: null,
         reflectToAttribute: true
+      },
+
+      /**
+       * A animation for the marker. "DROP" or "BOUNCE". See
+       * https://developers.google.com/maps/documentation/javascript/examples/marker-animations.
+       */
+      animation: {
+        type: String,
+        value: null,
+        observer: '_animationChanged'
+      },
+
+      /**
+       * Specifies whether the InfoWindow is open or not
+       */
+      open: {
+        type: Boolean,
+        value: false,
+        observer: '_openChanged'
       }
     },
 
     observers: [
       '_updatePosition(latitude, longitude)'
     ],
 
     detached: function() {
       if (this.marker) {
         this.marker.setMap(null);
@@ skipping 43 matching lines @@
         } else {
           this._clearListener('mousedown');
           this._clearListener('mousemove');
           this._clearListener('mouseout');
           this._clearListener('mouseover');
           this._clearListener('mouseup');
         }
       }
     },
 
+    _animationChanged: function() {
+      if (this.marker) {
+        this.marker.setAnimation(google.maps.Animation[this.animation]);
+      }
+    },
+
     _iconChanged: function() {
       if (this.marker) {
         this.marker.setIcon(this.icon);
       }
     },
 
     _zIndexChanged: function() {
       if (this.marker) {
         this.marker.setZIndex(this.zIndex);
       }
@@ skipping 19 matching lines @@
       this._contentObserver.observe( this, {
         childList: true,
         subtree: true
       });
 
       var content = this.innerHTML.trim();
       if (content) {
         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.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.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);
+          this.fire('google-map-marker-open');
+        } else {
+          this.info.close();
+          this.fire('google-map-marker-close');
+        }
+      }
+    },
+
     _mapReady: function() {
       this._listeners = {};
       this.marker = new google.maps.Marker({
         map: this.map,
         position: {
           lat: parseFloat(this.latitude),
           lng: parseFloat(this.longitude)
         },
         title: this.title,
+        animation: google.maps.Animation[this.animation],
         draggable: this.draggable,
         visible: !this.hidden,
         icon: this.icon,
         zIndex: this.zIndex
       });
       this._contentChanged();
       this._clickEventsChanged();
       this._contentChanged();
       this._mouseEventsChanged();
+      this._openChanged();
       setupDragHandler_.bind(this)();
     },
 
     _clearListener: function(name) {
       if (this._listeners[name]) {
         google.maps.event.removeListener(this._listeners[name]);
         this._listeners[name] = null;
       }
     },
 
@@ skipping 17 matching lines @@
           this.marker.setDraggable(this.draggable);
           setupDragHandler_.bind(this)();
           break;
         case 'title':
           this.marker.setTitle(this.title);
           break;
       }
     }
   });
 
-  function setupDragHandler_() {
-    if (this.draggable) {
-      this.dragHandler_ = google.maps.event.addListener(
-          this.marker, 'dragend', onDragEnd_.bind(this));
-    } else {
-      google.maps.event.removeListener(this.dragHandler_);
-      this.dragHandler_ = null;
-    }
-  }
-
-  function onDragEnd_(e, details, sender) {
-    this.latitude = e.latLng.lat();
-    this.longitude = e.latLng.lng();
-  }
 })();
 </script>