setPosition fix

teambirowsky · Jan 24, 2017 · 124fd8e · 124fd8e
1 parent 3c97759
commit 124fd8e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 49 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -8,6 +8,14 @@
 
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
+    <script>
+        /* this script must run before Polymer is imported */
+				window.Polymer = {
+					dom: 'shadow',
+					lazyRegister: true
+				};
+    </script>
+
     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
     <link rel="import" href="../../google-map/google-map-elements.html">
@@ -38,38 +46,23 @@
 <div class="vertical-section-container">
     <h3>Basic google-map-custom-maker demo</h3>
     <demo-snippet>
-        <template>
+        <template is="dom-bind" id="tpl">
             <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers
                         api-key="AIzaSyDtwbkcg7mLu-h4J_UydSkF2KtrBtdGuTk">
-                <google-map-marker latitude="37.779" longitude="-122.3892"
-                                   draggable="true" title="Go Giants!"></google-map-marker>
-                <google-map-marker latitude="37.777" longitude="-122.38913"></google-map-marker>
-                <google-map-custom-marker latitude="37.777" longitude="-122.38913">
-                    <div class="mymarker">Custom Marker</div>
-                </google-map-custom-marker>
-
-                <google-map-marker latitude="37.777" longitude="-122.38623"></google-map-marker>
-                <google-map-custom-marker latitude="37.777" longitude="-122.38623" position="top">
-                    <div class="mymarker">Custom Marker</div>
-                </google-map-custom-marker>
-
-                <google-map-marker latitude="37.777" longitude="-122.38223"></google-map-marker>
-                <google-map-custom-marker latitude="37.777" longitude="-122.38223" position="right">
-                    <div class="mymarker">Custom Marker</div>
-                </google-map-custom-marker>
-
-                <google-map-marker latitude="37.777" longitude="-122.38023"></google-map-marker>
-                <google-map-custom-marker latitude="37.777" longitude="-122.38023" position="bottom">
-                    <div class="mymarker">Custom Marker</div>
-                </google-map-custom-marker>
-
-                <google-map-marker latitude="37.777" longitude="-122.38423"></google-map-marker>
-                <google-map-custom-marker latitude="37.777" longitude="-122.38423" position="left">
-                    <div class="mymarker">Custom Marker</div>
-                </google-map-custom-marker>
+                <template is="dom-repeat" items="{{markers}}">
+                    <google-map-custom-marker latitude="{{item.lat}}" longitude="{{item.lng}}" position="left">
+                        <div class="mymarker">Custom Marker {{index}}</div>
+                    </google-map-custom-marker>
+                </template>
             </google-map>
         </template>
     </demo-snippet>
 </div>
+<script>
+
+    var t = document.querySelector('#tpl');
+    var markers = [ { lat: "37.777", lng: "-122.38423" }, { lat: "37.777", lng: "-122.38123" } ];
+    t.markers = markers;
+</script>
 </body>
 </html>
diff --git a/google-map-custom-maker.html b/google-map-custom-maker.html
@@ -25,16 +25,16 @@
 -->
 
 <dom-module id="google-map-custom-marker">
-  <style>
-    :host {
-      display: none;
-    }
-  </style>
-  <template>
-    <custom-marker id="marker" position="{{position}}">
-      <content></content>
-    </custom-marker>
-  </template>
+    <style>
+        :host {
+            display: none;
+        }
+    </style>
+    <template>
+        <custom-marker id="marker" position="{{position}}">
+            <content></content>
+        </custom-marker>
+    </template>
 </dom-module>
 
 <script>
@@ -118,11 +118,15 @@
 				'_updatePosition(latitude, longitude)'
 			],
 
+			_clearOverlay: function () {
+				google.maps.event.clearInstanceListeners(this.overlay);
+				this._listeners = {};
+				this.overlay.setMap(null);
+			},
+
 			detached: function () {
 				if (this.overlay) {
-					google.maps.event.clearInstanceListeners(this.overlay);
-					this._listeners = {};
-					this.overlay.setMap(null);
+					this._clearOverlay();
 				}
 				if (this._contentObserver)
 					this._contentObserver.disconnect();
@@ -136,9 +140,8 @@
 			},
 
 			_updatePosition: function () {
-				if (this.overlay && this.latitude != null && this.longitude != null) {
-					this.overlay.setPosition(new google.maps.LatLng(
-						parseFloat(this.latitude), parseFloat(this.longitude)));
+				if (this.overlay) {
+					this._setupOverlay();
 				}
 			},
 
@@ -188,12 +191,6 @@
 				}
 			},
 
-			_zIndexChanged: function () {
-				if (this.overlay) {
-					this.overlay.setZIndex(this.zIndex);
-				}
-			},
-
 			_mapChanged: function () {
 				// Marker will be rebuilt, so disconnect existing one from old map and listeners.
 				if (this.overlay) {
@@ -215,13 +212,18 @@
 			},
 
 			_setupOverlay: function () {
+				if (this.overlay) {
+					this._clearOverlay();
+				}
+
 				var elem = this;
 
 				function CustomMarker(lat, lng, map, marker, args) {
 					this.latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
 					this.args = args;
 					this.setMap(map);
 					this.marker = marker.cloneNode(true);
+					console.log(marker, this.marker);
 				}
 
 				CustomMarker.prototype = new google.maps.OverlayView();