component.wrapper.GoogleMaps: zoomChange event #3725

Author: tobiu

examples/component/wrapper/googleMaps/MainContainer.mjs

@@ -21,6 +21,10 @@ class MainContainer extends Viewport {
             flex     : 1,
             reference: 'google-maps-component',
 
+            listeners: {
+                zoomChange: 'onMapZoomChance'
+            },
+
             markerStoreConfig: {
                 data: [{
                     id      : '1',
@@ -50,6 +54,7 @@ class MainContainer extends Viewport {
                 listeners           : {change: 'onZoomFieldChange'},
                 minValue            : 0,
                 maxValue            : 10,
+                reference           : 'zoom-field',
                 style               : {marginLeft: '10px'},
                 value               : 8,
                 width               : 100

examples/component/wrapper/googleMaps/MainContainerController.mjs

@@ -20,6 +20,13 @@ class MainContainerController extends ComponentController {
         this.getReference('google-maps-component').panTo({lat: 37.655, lng: -122.4175})
     }
 
+    /**
+     * @param {Object} data
+     */
+    onMapZoomChance(data) {
+        this.getReference('zoom-field').value = data.value;
+    }
+
     /**
      * @param {Object} data
      */

src/component/wrapper/GoogleMaps.mjs

@@ -82,9 +82,10 @@ class GoogleMaps extends Base {
         let me = this;
 
         me.addDomListeners({
-            googleMarkerClick: me.parseMarkerClick,
-            local            : false,
-            scope            : me
+            googleMapZoomChange: me.onMapZoomChange,
+            googleMarkerClick  : me.parseMarkerClick,
+            local              : false,
+            scope              : me
         })
     }
 
@@ -181,9 +182,16 @@ class GoogleMaps extends Base {
      */
     afterSetZoom(value, oldValue) {
         if (oldValue !== undefined) {
+            let me = this;
+
             Neo.main.addon.GoogleMaps.setZoom({
-                appName: this.appName,
-                id     : this.id,
+                appName: me.appName,
+                id     : me.id,
+                value
+            });
+
+            me.fire('zoomChange', {
+                id: me.id,
                 value
             })
         }
@@ -226,6 +234,13 @@ class GoogleMaps extends Base {
      */
     onComponentMounted() {}
 
+    /**
+     * @param {Object} data
+     */
+    onMapZoomChange(data) {
+        this.zoom = data.value;
+    }
+
     /**
      * @param {Object} record
      */

src/main/addon/GoogleMaps.mjs

@@ -107,9 +107,10 @@ class GoogleMaps extends Base {
      */
     create(data) {
         let me = this,
-            id = data.id;
+            id = data.id,
+            map;
 
-        me.maps[id] = new google.maps.Map(DomAccess.getElement(id), {
+        me.maps[id] = map = new google.maps.Map(DomAccess.getElement(id), {
             center           : data.center,
             fullscreenControl: data.fullscreenControl,
             maxZoom          : data.maxZoom,
@@ -119,6 +120,8 @@ class GoogleMaps extends Base {
             ...data.mapOptions
         });
 
+        map.addListener('zoom_changed', me.onMapZoomChange.bind(me, map, id));
+
         me.fire('mapCreated', id);
     }
 
@@ -142,6 +145,19 @@ class GoogleMaps extends Base {
         })
     }
 
+    /**
+     * @param {google.maps.Map} map
+     * @param {String} mapId
+     */
+    onMapZoomChange(map, mapId){
+        DomEvents.sendMessageToApp({
+            id   : mapId,
+            path : [{cls: [], id: mapId}],
+            type : 'googleMapZoomChange',
+            value: map.zoom
+        })
+    }
+
     /**
      * @param {google.maps.Marker} marker
      * @param {Object} event