From cecc47c0abb27413489627a3e8d607e4359f626a Mon Sep 17 00:00:00 2001 From: Francesc Ortiz Date: Fri, 8 Sep 2017 14:12:51 +0200 Subject: [PATCH 1/5] Add map bounds to available data. --- google-map.html | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/google-map.html b/google-map.html index 833897a..2fcc5dd 100644 --- a/google-map.html +++ b/google-map.html @@ -235,6 +235,15 @@ }, /** + * Bounds of the map + */ + bounds: { + type: Object, + notify: true, + value: null + }, + + /** * A kml file to load. */ kml: { @@ -625,9 +634,30 @@ if (this.fitToMarkers) { // we might not have a center if we are doing fit-to-markers this._fitToMarkersChanged(); } + + this.calcBounds(); } }, + calcBounds: function() { + var bounds = this.map.getBounds(); + if (bounds) { + var ne = bounds.getNorthEast(); + var sw = bounds.getSouthWest(); + this.bounds = { + ne: { + lat: ne.lat(), + lng: ne.lng() + }, + sw: { + lat: sw.lat(), + lng: sw.lng() + } + } + } + }, + + _loadKml: function() { if (this.map && this.kml) { var kmlfile = new google.maps.KmlLayer({ @@ -670,12 +700,14 @@ this.map.panTo(newCenter); } } + this.calcBounds(); } }, _zoomChanged: function() { if (this.map) { this.map.setZoom(Number(this.zoom)); + this.calcBounds(); } }, @@ -806,6 +838,7 @@ } this.map.setCenter(latLngBounds.getCenter()); + this.calcBounds(); } }, @@ -814,10 +847,12 @@ var center = this.map.getCenter(); this.latitude = center.lat(); this.longitude = center.lng(); + this.calcBounds(); }.bind(this)); google.maps.event.addListener(this.map, 'zoom_changed', function() { this.zoom = this.map.getZoom(); + this.calcBounds(); }.bind(this)); google.maps.event.addListener(this.map, 'maptypeid_changed', function() { From ca8dc04c8e699331d16c41bdee06fc1bee8841da Mon Sep 17 00:00:00 2001 From: Francesc Ortiz Date: Sun, 10 Sep 2017 10:38:10 +0200 Subject: [PATCH 2/5] Add option to disable fullscreen button. --- google-map.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/google-map.html b/google-map.html index 2fcc5dd..29f401b 100644 --- a/google-map.html +++ b/google-map.html @@ -315,6 +315,15 @@ observer: '_disableStreetViewControlChanged' }, + /** + * If set, removes the map's 'fullscreen' UI controls. + */ + disableFullscreenControl: { + type: Boolean, + value: false, + observer: '_disableFullscreenControlChanged' + }, + /** * If set, the zoom level is set such that all markers (google-map-marker children) are brought into view. */ @@ -508,6 +517,7 @@ disableDefaultUI: this.disableDefaultUi, mapTypeControl: !this.disableDefaultUi && !this.disableMapTypeControl, streetViewControl: !this.disableDefaultUi && !this.disableStreetViewControl, + fullscreenControl: !this.disableDefaultUi && !this.disableFullscreenControl, disableDoubleClickZoom: this.disableZoom, scrollwheel: !this.disableZoom, styles: this.styles, @@ -800,6 +810,13 @@ this.map.setOptions({streetViewControl: !this.disableStreetViewControl}); }, + _disableFullscreenControlChanged: function() { + if (!this.map) { + return; + } + this.map.setOptions({fullscreenControl: !this.disableFullscreenControl}); + }, + _disableZoomChanged: function() { if (!this.map) { return; From a6605e22a230cc97bcbe913a87478bc9bbc327d2 Mon Sep 17 00:00:00 2001 From: Francesc Ortiz Date: Wed, 13 Sep 2017 14:47:58 +0200 Subject: [PATCH 3/5] Elm virtual DOM had issues with markers when hiding via dettach and showing back a map. Marker events where being set prior proper marker initialization. This ensures the marker is initialized is the map is set. --- google-map-marker.html | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/google-map-marker.html b/google-map-marker.html index fb789a3..d072df6 100644 --- a/google-map-marker.html +++ b/google-map-marker.html @@ -306,7 +306,7 @@ }, _clickEventsChanged: function() { - if (this.map) { + if (this._mapSet()) { if (this.clickEvents) { this._forwardEvent('click'); this._forwardEvent('dblclick'); @@ -320,7 +320,7 @@ }, _dragEventsChanged: function() { - if (this.map) { + if (this._mapSet()) { if (this.dragEvents) { this._forwardEvent('drag'); this._forwardEvent('dragend'); @@ -334,7 +334,7 @@ }, _mouseEventsChanged: function() { - if (this.map) { + if (this._mapSet()) { if (this.mouseEvents) { this._forwardEvent('mousedown'); this._forwardEvent('mousemove'); @@ -375,6 +375,17 @@ } }, + _mapSet: function() { + if (this.map) { + if (!this._listeners) { + this._mapChanged(); + } + return true; + } else { + return false; + } + }, + _mapChanged: function() { // Marker will be rebuilt, so disconnect existing one from old map and listeners. if (this.marker) { From 4797cf9821f1cf10acf533e3c0cdcaf3ca6e4fa4 Mon Sep 17 00:00:00 2001 From: Francesc Ortiz Date: Wed, 13 Sep 2017 15:08:54 +0200 Subject: [PATCH 4/5] Much simpler approach for issue with Elm virtual DOM. --- google-map-marker.html | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/google-map-marker.html b/google-map-marker.html index d072df6..21d238c 100644 --- a/google-map-marker.html +++ b/google-map-marker.html @@ -306,7 +306,7 @@ }, _clickEventsChanged: function() { - if (this._mapSet()) { + if (this.map && this.marker) { if (this.clickEvents) { this._forwardEvent('click'); this._forwardEvent('dblclick'); @@ -320,7 +320,7 @@ }, _dragEventsChanged: function() { - if (this._mapSet()) { + if (this.map && this.marker) { if (this.dragEvents) { this._forwardEvent('drag'); this._forwardEvent('dragend'); @@ -334,7 +334,7 @@ }, _mouseEventsChanged: function() { - if (this._mapSet()) { + if (this.map && this.marker) { if (this.mouseEvents) { this._forwardEvent('mousedown'); this._forwardEvent('mousemove'); @@ -375,17 +375,6 @@ } }, - _mapSet: function() { - if (this.map) { - if (!this._listeners) { - this._mapChanged(); - } - return true; - } else { - return false; - } - }, - _mapChanged: function() { // Marker will be rebuilt, so disconnect existing one from old map and listeners. if (this.marker) { From 8d191453af2e0cc56d8d08e2d9a43df11031df3e Mon Sep 17 00:00:00 2001 From: Francesc Ortiz Date: Wed, 13 Sep 2017 15:11:40 +0200 Subject: [PATCH 5/5] Much simpler approach for issue with Elm virtual DOM. --- google-map-marker.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/google-map-marker.html b/google-map-marker.html index 21d238c..58b0d05 100644 --- a/google-map-marker.html +++ b/google-map-marker.html @@ -306,7 +306,7 @@ }, _clickEventsChanged: function() { - if (this.map && this.marker) { + if (this.marker) { if (this.clickEvents) { this._forwardEvent('click'); this._forwardEvent('dblclick'); @@ -320,7 +320,7 @@ }, _dragEventsChanged: function() { - if (this.map && this.marker) { + if (this.marker) { if (this.dragEvents) { this._forwardEvent('drag'); this._forwardEvent('dragend'); @@ -334,7 +334,7 @@ }, _mouseEventsChanged: function() { - if (this.map && this.marker) { + if (this.marker) { if (this.mouseEvents) { this._forwardEvent('mousedown'); this._forwardEvent('mousemove');