diff --git a/demo/index.html b/demo/index.html index a2a4bc7..9000012 100644 --- a/demo/index.html +++ b/demo/index.html @@ -26,7 +26,7 @@ + title="Go Giants!" draggable="true" drag-events> @@ -50,6 +50,18 @@ function toggleControls() { gmap.disableDefaultUi = !gmap.disableDefaultUi; } + + var marker = document.querySelector('google-map-marker'); + var poly = document.querySelector('google-map-poly'); + var point = document.querySelector('google-map-point'); + + marker.addEventListener('google-map-marker-dragend', function(e) { + var latLng = e.detail.latLng; + console.log('pin dropped', latLng.lat(), latLng.lng()); + point.latitude = latLng.lat(); + point.longitude = latLng.lng(); + poly._buildPathFromPoints(); + }); diff --git a/google-map-elements.html b/google-map-elements.html new file mode 100644 index 0000000..519e75c --- /dev/null +++ b/google-map-elements.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/google-map-marker.html b/google-map-marker.html index 7703a9b..42c5951 100644 --- a/google-map-marker.html +++ b/google-map-marker.html @@ -75,6 +75,21 @@ * @event google-map-marker-dblclick */ + /** + * Fired repeatedly while the user drags the marker. Requires the dragEvents attribute to be true. + * @event google-map-marker-drag + */ + + /** + * Fired when the user stops dragging the marker. Requires the dragEvents attribute to be true. + * @event google-map-marker-dragend + */ + + /** + * Fired when the user starts dragging the marker. Requires the dragEvents attribute to be true. + * @event google-map-marker-dragstart + */ + /** * Fired for a mousedown on the marker. Requires the mouseEvents attribute to be true. * @event google-map-marker-mousedown @@ -161,6 +176,15 @@ observer: '_clickEventsChanged' }, + /** + * When true, marker drag* events are automatically registered. + */ + dragEvents: { + type: Boolean, + value: false, + observer: '_dragEventsChanged' + }, + /** * Image URL for the marker icon. * @type string|google.maps.Icon|google.maps.Symbol @@ -271,6 +295,20 @@ } }, + _dragEventsChanged: function() { + if (this.map) { + if (this.dragEvents) { + this._forwardEvent('drag'); + this._forwardEvent('dragend'); + this._forwardEvent('dragstart'); + } else { + this._clearListener('drag'); + this._clearListener('dragend'); + this._clearListener('dragstart'); + } + } + }, + _mouseEventsChanged: function() { if (this.map) { if (this.mouseEvents) { @@ -382,7 +420,7 @@ }); this._contentChanged(); this._clickEventsChanged(); - this._contentChanged(); + this._dragEventsChanged(); this._mouseEventsChanged(); this._openChanged(); setupDragHandler_.bind(this)(); diff --git a/index.html b/index.html index c043544..06d3c8f 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,6 @@ - - + diff --git a/test/marker-basic.html b/test/marker-basic.html index 3e58623..7f8055d 100644 --- a/test/marker-basic.html +++ b/test/marker-basic.html @@ -12,7 +12,7 @@ - +