Merge pull request #250 from naderio/master

drag events support in google-map-marker element
GoogleWebComponents · Jan 15, 2016 · eecb1cc · eecb1cc
2 parents 3a8c921 + 4de8611
commit eecb1cc
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 5 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -26,7 +26,7 @@
 <google-map latitude="37.779" longitude="-122.3892" min-zoom="9" max-zoom="11"
             language="en">
   <google-map-marker latitude="37.779" longitude="-122.3892"
-                     title="Go Giants!" draggable="true">
+                     title="Go Giants!" draggable="true" drag-events>
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/San_Francisco_Giants_Cap_Insignia.svg/200px-San_Francisco_Giants_Cap_Insignia.svg.png" />
   </google-map-marker>
   <google-map-poly closed fill-color="red" fill-opacity=".25" stroke-weight="1">
@@ -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();
+  });
 </script>
 </body>
 </html>
diff --git a/google-map-elements.html b/google-map-elements.html
@@ -0,0 +1,7 @@
+<link rel="import" href="google-map.html">
+<link rel="import" href="google-map-marker.html">
+<link rel="import" href="google-map-marker.html">
+<link rel="import" href="google-map-directions.html">
+<link rel="import" href="google-map-search.html">
+<link rel="import" href="google-map-point.html">
+<link rel="import" href="google-map-poly.html">
diff --git 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
@@ -8,7 +8,6 @@
 
 </head>
 <body>
-<!-- FIXME rename sources to src,no multiple sources in iron-component-page yet-->
-  <iron-component-page sources='["google-map.html", "google-map-directions.html", "google-map-search.html"]'></iron-component-page>
+<iron-component-page src="google-map-elements.html"></iron-component-page>
 </body>
 </html>
diff --git a/test/marker-basic.html b/test/marker-basic.html
@@ -12,7 +12,7 @@
 
   <google-map id="map1" latitude="37.77493" longitude="-122.41942">
     <google-map-marker latitude="37.779" longitude="-122.3892"></google-map-marker>
-    <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
+    <google-map-marker id="marker2" latitude="37.777" longitude="-122.38911" drag-events></google-map-marker>
   </google-map>
 
 <script>
@@ -75,6 +75,21 @@
     });
   });
 
+  test('dragEvents', function() {
+
+    var markerEl = Polymer.dom(map).querySelector('#marker2');
+
+    assert.equal(markerEl.dragEvents, true);
+
+    flush(function() {
+      assert.instanceOf(markerEl._listeners.drag, google.maps.MapsEventListener);
+      assert.instanceOf(markerEl._listeners.dragstart, google.maps.MapsEventListener);
+      assert.instanceOf(markerEl._listeners.dragend, google.maps.MapsEventListener); 
+      done();
+    });
+
+  });
+
 });
 
 </script>