Index: lib/src/google-map/google-map-marker.html |
diff --git a/lib/src/google-map/google-map-marker.html b/lib/src/google-map/google-map-marker.html |
index 33abe9a9fcfc3376bc3d7838647ba33f78156000..c434414ae5eb8dc1eb484b79ed764ed923936fee 100644 |
--- a/lib/src/google-map/google-map-marker.html |
+++ b/lib/src/google-map/google-map-marker.html |
@@ -42,8 +42,23 @@ child of `google-map`. |
</dom-module> |
<script> |
- |
(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', |
@@ -53,45 +68,63 @@ child of `google-map`. |
* @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. |
@@ -161,6 +194,7 @@ child of `google-map`. |
value: null, |
reflectToAttribute: true |
}, |
+ |
/** |
* The marker's latitude coordinate. |
*/ |
@@ -168,6 +202,25 @@ child of `google-map`. |
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' |
} |
}, |
@@ -231,6 +284,12 @@ child of `google-map`. |
} |
}, |
+ _animationChanged: function() { |
+ if (this.marker) { |
+ this.marker.setAnimation(google.maps.Animation[this.animation]); |
+ } |
+ }, |
+ |
_iconChanged: function() { |
if (this.marker) { |
this.marker.setIcon(this.icon); |
@@ -270,20 +329,37 @@ child of `google-map`. |
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({ |
@@ -293,6 +369,7 @@ child of `google-map`. |
lng: parseFloat(this.longitude) |
}, |
title: this.title, |
+ animation: google.maps.Animation[this.animation], |
draggable: this.draggable, |
visible: !this.hidden, |
icon: this.icon, |
@@ -302,6 +379,7 @@ child of `google-map`. |
this._clickEventsChanged(); |
this._contentChanged(); |
this._mouseEventsChanged(); |
+ this._openChanged(); |
setupDragHandler_.bind(this)(); |
}, |
@@ -339,19 +417,5 @@ child of `google-map`. |
} |
}); |
- 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> |