@appbaseio/reactivesearch-vue 1.34.0-alpha.2 → 1.35.0

package/dist/cjs/ReactiveGoogleMap.js

@@ -8,23 +8,23 @@ var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
 var constants = require('@appbaseio/reactivecore/lib/utils/constants');
 var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
-var vue = require('vue');
 var VueTypes = _interopDefault(require('vue-types'));
-var vueEmotion = require('@appbaseio/vue-emotion');
-var emotion = require('emotion');
+require('emotion');
+var styled = require('@appbaseio/vue-emotion');
+var styled__default = _interopDefault(styled);
 require('polished');
-require('./Button-626c5e8e.js');
-var vueTypes = require('./vueTypes-621a8143.js');
-var Pagination = require('./Pagination-a468f960.js');
+require('./Button-841fd06d.js');
+var vueTypes = require('./vueTypes-568ce5e6.js');
+var Pagination = require('./Pagination-6d184d4a.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-dc25b706.js');
-var ComponentWrapper = require('./ComponentWrapper-db45cc6d.js');
-var PreferencesConsumer = require('./PreferencesConsumer-034c55e3.js');
-var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
-var FormControlList = require('./FormControlList-cf1ff2ca.js');
-var VueGoogleMaps = require('vue-google-maps-community-fork');
-var VueGoogleMaps__default = _interopDefault(VueGoogleMaps);
+var index = require('./index-de136c17.js');
+var ComponentWrapper = require('./ComponentWrapper-94c50228.js');
+var PreferencesConsumer = require('./PreferencesConsumer-5e6e84a2.js');
+var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
+var FormControlList = require('./FormControlList-bbb5cd24.js');
+var GmapVue = require('gmap-vue');
+var GmapVue__default = _interopDefault(GmapVue);
 var geohash = _interopDefault(require('ngeohash'));
 
 var setStreaming = configureStore.Actions.setStreaming,
@@ -109,6 +109,7 @@ var ReactiveMap = {
   props: {
     className: vueTypes.types.string,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     dataField: vueTypes.types.stringRequired,
     react: vueTypes.types.react,
     size: vueTypes.types.number,
@@ -116,6 +117,7 @@ var ReactiveMap = {
     URLParams: VueTypes.bool,
     autoCenter: VueTypes.bool,
     getMapRef: VueTypes.func.isRequired,
+    getMapPromise: VueTypes.func,
     center: vueTypes.types.location,
     defaultCenter: vueTypes.types.location,
     defaultPin: vueTypes.types.string,
@@ -183,32 +185,37 @@ var ReactiveMap = {
       }
     },
     defaultQuery: function defaultQuery(newVal, oldVal) {
+      var _this = this;
       if (!index.isQueryIdentical(newVal, oldVal, null, this.$props)) {
-        var options = getQueryOptions(this.$props);
-        options.from = 0;
-        this.$defaultQuery = newVal(null, this.$props);
-        var _ref = this.$defaultQuery || {},
-          sort = _ref.sort,
-          query = _ref.query;
-        if (sort) {
-          options.sort = this.$defaultQuery.sort;
-        }
-        var queryOptions = getOptionsFromQuery(this.$defaultQuery);
-        if (queryOptions) {
-          options = _rollupPluginBabelHelpers._extends({}, options, getOptionsFromQuery(this.$defaultQuery));
-        }
-        // Update calculated default query in store
-        this.setQueryOptions(this.$props.componentId, options, false);
-        var persistMapQuery = true;
-        var forceExecute = true;
-        // Update default query to include the geo bounding box query
-        this.setDefaultQueryForRSAPI();
-        var meta = {
-          mapBoxBounds: this.mapBoxBounds
-        };
-        this.setMapData(this.componentId, query, persistMapQuery, forceExecute, meta);
-        this.currentPageState = 0;
-        this.from = 0;
+        this.getMapPromise().then(function () {
+          var options = getQueryOptions(_this.$props);
+          options.from = 0;
+          _this.$defaultQuery = newVal(null, _this.$props);
+          // Update default query to include the geo bounding box query
+          _this.setDefaultQueryForRSAPI();
+          if (_this.$defaultQuery) {
+            var _ref = _this.$defaultQuery || {},
+              sort = _ref.sort,
+              query = _ref.query;
+            if (sort) {
+              options.sort = _this.$defaultQuery.sort;
+            }
+            var queryOptions = getOptionsFromQuery(_this.$defaultQuery);
+            if (queryOptions) {
+              options = _rollupPluginBabelHelpers._extends({}, options, getOptionsFromQuery(_this.$defaultQuery));
+            }
+            // Update calculated default query in store
+            _this.setQueryOptions(_this.$props.componentId, options, false);
+            var persistMapQuery = true;
+            var forceExecute = true;
+            var meta = {
+              mapBoxBounds: _this.mapBoxBounds
+            };
+            _this.setMapData(_this.componentId, query, persistMapQuery, forceExecute, meta);
+            _this.currentPageState = 0;
+            _this.from = 0;
+          }
+        });
       }
     },
     promotedResults: function promotedResults(newVal, oldVal) {
@@ -236,7 +243,7 @@ var ReactiveMap = {
       }
     },
     rawData: function rawData(newVal, oldVal) {
-      var _this = this;
+      var _this2 = this;
       if (!isEqual(newVal, oldVal)) {
         var promotedResults = this.promotedResults,
           hits = this.hits;
@@ -255,10 +262,10 @@ var ReactiveMap = {
           filteredResults = [].concat(parsedPromotedResults, filteredResults);
         }
         filteredResults = filteredResults.filter(function (item) {
-          return !!item[_this.dataField];
+          return !!item[_this2.dataField];
         }).map(function (item) {
           var _extends2;
-          return _rollupPluginBabelHelpers._extends({}, item, (_extends2 = {}, _extends2[_this.dataField] = getLocationObject(item[_this.dataField]), _extends2));
+          return _rollupPluginBabelHelpers._extends({}, item, (_extends2 = {}, _extends2[_this2.dataField] = getLocationObject(item[_this2.dataField]), _extends2));
         });
         this.filteredResults = this.addNoise(filteredResults);
         if (this.calculateMarkers) {
@@ -303,15 +310,15 @@ var ReactiveMap = {
       return this.parseLocation(MAP_CENTER);
     },
     addNoise: function addNoise(hits) {
-      var _this2 = this;
+      var _this3 = this;
       var hitMap = {};
       var updatedHits = [];
       hits.forEach(function (item) {
         var updatedItem = _rollupPluginBabelHelpers._extends({}, item);
-        var location = _this2.parseLocation(item[_this2.dataField]);
+        var location = _this3.parseLocation(item[_this3.dataField]);
         var key = JSON.stringify(location);
         var count = hitMap[key] || 0;
-        updatedItem[_this2.dataField] = count ? withDistinctLat(location, count) : location;
+        updatedItem[_this3.dataField] = count ? withDistinctLat(location, count) : location;
         updatedHits = [].concat(updatedHits, [updatedItem]);
         hitMap[key] = count + 1;
       });
@@ -324,9 +331,9 @@ var ReactiveMap = {
       return null;
     },
     getHitsCenter: function getHitsCenter(hits) {
-      var _this3 = this;
+      var _this4 = this;
       var data = hits.map(function (hit) {
-        return hit[_this3.dataField];
+        return hit[_this4.dataField];
       });
       if (data.length) {
         var numCoords = data.length;
@@ -365,7 +372,7 @@ var ReactiveMap = {
       return false;
     },
     getCenter: function getCenter(hits) {
-      var _this4 = this;
+      var _this5 = this;
       if (this.center) {
         return this.parseLocation(this.center);
       }
@@ -373,7 +380,7 @@ var ReactiveMap = {
       if (mapRef && typeof mapRef.getCenter === 'function' && this.$options.preserveCenter) {
         var currentCenter = mapRef.getCenter();
         setTimeout(function () {
-          _this4.$options.preserveCenter = false;
+          _this5.$options.preserveCenter = false;
         }, 100);
         return this.parseLocation({
           lat: currentCenter.lat(),
@@ -431,12 +438,14 @@ var ReactiveMap = {
       // or whenever searchAsMove is true and the map is dragged
       if (executeUpdate || !this.skipBoundingBox && !this.mapBoxBounds) {
         this.$defaultQuery = this.getGeoQuery();
-        var persistMapQuery = !!this.center;
-        var forceExecute = this.searchAsMove;
-        var meta = {
-          mapBoxBounds: this.mapBoxBounds
-        };
-        this.setMapData(this.componentId, this.$defaultQuery, persistMapQuery, forceExecute, meta);
+        if (this.$defaultQuery) {
+          var persistMapQuery = !!this.center;
+          var forceExecute = this.searchAsMove;
+          var meta = {
+            mapBoxBounds: this.mapBoxBounds
+          };
+          this.setMapData(this.componentId, this.$defaultQuery, persistMapQuery, forceExecute, meta);
+        }
       }
       this.skipBoundingBox = false;
     },
@@ -572,7 +581,8 @@ var ReactiveMap = {
           geo_bounding_box: (_geo_bounding_box = {}, _geo_bounding_box[this.dataField] = boundingBoxCoordinates, _geo_bounding_box)
         };
         if (this.$defaultQuery) {
-          var query = this.$defaultQuery.query;
+          var _ref2 = this.$defaultQuery || {},
+            query = _ref2.query;
           if (query) {
             // adds defaultQuery's query to geo-query
             // to generate a map query
@@ -640,15 +650,16 @@ var ReactiveMap = {
       this.$emit('search-as-move', this.searchAsMove);
     },
     renderErrorComponent: function renderErrorComponent() {
-      var renderError = this.$slots.renderError || this.$props.renderError;
+      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
       if (renderError && this.error && !this.isLoading) {
         return index.isFunction(renderError) ? renderError(this.error) : renderError;
       }
       return null;
     },
     renderSearchAsMove: function renderSearchAsMove() {
+      var h = this.$createElement;
       if (this.showSearchAsMove) {
-        return vue.createVNode("div", {
+        return h("div", {
           "style": {
             position: 'absolute',
             bottom: '30px',
@@ -660,29 +671,40 @@ var ReactiveMap = {
             borderRadius: 2,
             zIndex: 10000
           },
-          "className": getClassName(this.innerClass, 'checkboxContainer') || null
-        }, [vue.createVNode(FormControlList.Checkbox, {
-          "type": "checkbox",
+          "attrs": {
+            "className": getClassName(this.innerClass, 'checkboxContainer') || null
+          }
+        }, [h(FormControlList.Checkbox, {
+          "attrs": {
+            "type": "checkbox",
+            "id": this.$props.componentId + "-searchasmove",
+            "checked": this.searchAsMove,
+            "show": true
+          },
           "class": getClassName(this.$props.innerClass, 'checkbox'),
-          "id": this.$props.componentId + "-searchasmove",
-          "onClick": this.toggleSearchAsMove,
-          "checked": this.searchAsMove,
-          "show": true
-        }, null), vue.createVNode("label", {
-          "className": getClassName(this.innerClass, 'label') || null,
-          "for": this.$props.componentId + "-searchasmove"
+          "on": {
+            "click": this.toggleSearchAsMove
+          }
+        }), h("label", {
+          "attrs": {
+            "className": getClassName(this.innerClass, 'label') || null,
+            "for": this.$props.componentId + "-searchasmove"
+          }
         }, [this.searchAsMoveLabel])]);
       }
       return null;
     },
     renderPagination: function renderPagination() {
-      return vue.createVNode(Pagination.Pagination, {
-        "pages": this.pages,
-        "totalPages": this.totalPages,
-        "currentPage": this.currentPageState,
-        "setPage": this.setPage,
-        "innerClass": this.innerClass
-      }, null);
+      var h = this.$createElement;
+      return h(Pagination.Pagination, {
+        "attrs": {
+          "pages": this.pages,
+          "totalPages": this.totalPages,
+          "currentPage": this.currentPageState,
+          "setPage": this.setPage,
+          "innerClass": this.innerClass
+        }
+      });
     }
   },
   created: function created() {
@@ -697,73 +719,82 @@ var ReactiveMap = {
     this.updateComponentProps(this.internalComponent, {
       from: this.from
     }, constants.componentTypes.reactiveMap);
+    this.setDefaultQueryForRSAPI();
   },
   mounted: function mounted() {
-    if (this.defaultPage < 0 && this.currentPage > 0) {
-      if (this.$props.URLParams) {
-        this.setPageURL(this.$props.componentId, this.currentPage, this.$props.componentId, false, true);
+    var _this6 = this;
+    this.getMapPromise().then(function () {
+      if (_this6.defaultPage < 0 && _this6.currentPage > 0) {
+        if (_this6.$props.URLParams) {
+          _this6.setPageURL(_this6.$props.componentId, _this6.currentPage, _this6.$props.componentId, false, true);
+        }
       }
-    }
-    var options = getQueryOptions(this.$props);
-    options.from = this.$data.from;
-    if (this.$props.sortBy) {
-      var _ref2;
-      options.sort = [(_ref2 = {}, _ref2[this.$props.dataField] = {
-        order: this.$props.sortBy
-      }, _ref2)];
-    }
-    this.$defaultQuery = null;
-    if (this.$props.defaultQuery) {
-      this.$defaultQuery = this.$props.defaultQuery();
-      options = _rollupPluginBabelHelpers._extends({}, options, getOptionsFromQuery(this.$defaultQuery));
-
-      // Override sort query with defaultQuery's sort if defined
-      if (this.$defaultQuery.sort) {
-        options.sort = this.$defaultQuery.sort;
+      var options = getQueryOptions(_this6.$props);
+      options.from = _this6.$data.from;
+      if (_this6.$props.sortBy) {
+        var _ref3;
+        options.sort = [(_ref3 = {}, _ref3[_this6.$props.dataField] = {
+          order: _this6.$props.sortBy
+        }, _ref3)];
       }
-      // since we want defaultQuery to be executed anytime
-      // map component's query is being executed
-      var persistMapQuery = true;
-      // no need to forceExecute because setReact() will capture the main query
-      // and execute the defaultQuery along with it
-      var forceExecute = false;
+      _this6.$defaultQuery = null;
+      if (_this6.$props.defaultQuery) {
+        _this6.$defaultQuery = _this6.$props.defaultQuery();
+        // Update default query for RS API
+        _this6.setDefaultQueryForRSAPI();
+        if (_this6.$defaultQuery) {
+          options = _rollupPluginBabelHelpers._extends({}, options, getOptionsFromQuery(_this6.$defaultQuery));
 
-      // Update default query for RS API
-      this.setDefaultQueryForRSAPI();
-      var meta = {
-        mapBoxBounds: this.mapBoxBounds
-      };
-      this.setMapData(this.componentId, this.$defaultQuery.query, persistMapQuery, forceExecute, meta);
-    } else {
-      // only apply geo-distance when defaultQuery prop is not set
-      var query = this.getGeoDistanceQuery();
-      if (query) {
-        // - only persist the map query if center prop is set
-        // - ideally, persist the map query if you want to keep executing it
-        //   whenever there is a change (due to subscription) in the component query
-        var _persistMapQuery = !!this.center;
+          // Override sort query with defaultQuery's sort if defined
+          if (_this6.$defaultQuery.sort) {
+            options.sort = _this6.$defaultQuery.sort;
+          }
+          // since we want defaultQuery to be executed anytime
+          // map component's query is being executed
+          var persistMapQuery = true;
+          // no need to forceExecute because setReact() will capture the main query
+          // and execute the defaultQuery along with it
+          var forceExecute = false;
+          var meta = {
+            mapBoxBounds: _this6.mapBoxBounds
+          };
+          if (_this6.$defaultQuery) {
+            _this6.setMapData(_this6.componentId, _this6.$defaultQuery.query, persistMapQuery, forceExecute, meta);
+            _this6.setQueryOptions(_this6.componentId, options);
+          }
+        }
+      } else {
+        // only apply geo-distance when defaultQuery prop is not set
+        var query = _this6.getGeoDistanceQuery();
+        if (query) {
+          // - only persist the map query if center prop is set
+          // - ideally, persist the map query if you want to keep executing it
+          //   whenever there is a change (due to subscription) in the component query
+          var _persistMapQuery = !!_this6.center;
 
-        // - forceExecute will make sure that the component query + Map query gets executed
-        //   irrespective of the changes in the component query
-        // - forceExecute will only come into play when searchAsMove is true
-        // - kindly note that forceExecute may result in one additional network request
-        //   since it bypasses the gatekeeping
-        var _forceExecute = this.searchAsMove;
-        // Set meta for `distance` and `coordinates` in selected value
-        var center = this.center || this.defaultCenter;
-        var coordinatesObject = this.getArrPosition(center);
-        var _meta = {
-          distance: this.defaultRadius,
-          coordinates: coordinatesObject.lat + ", " + coordinatesObject.lon
-        };
-        this.setMapData(this.componentId, query, _persistMapQuery, _forceExecute, _meta);
+          // - forceExecute will make sure that the component query + Map query gets executed
+          //   irrespective of the changes in the component query
+          // - forceExecute will only come into play when searchAsMove is true
+          // - kindly note that forceExecute may result in one additional network request
+          //   since it bypasses the gatekeeping
+          var _forceExecute = _this6.searchAsMove;
+          // Set meta for `distance` and `coordinates` in selected value
+          var center = _this6.center || _this6.defaultCenter;
+          var coordinatesObject = _this6.getArrPosition(center);
+          var _meta = {
+            distance: _this6.defaultRadius,
+            coordinates: coordinatesObject.lat + ", " + coordinatesObject.lon
+          };
+          _this6.setMapData(_this6.componentId, query, _persistMapQuery, _forceExecute, _meta);
+        }
+        _this6.setQueryOptions(_this6.componentId, options);
       }
-    }
-    this.setQueryOptions(this.componentId, options, !(this.$defaultQuery && this.$defaultQuery.query));
+    });
   },
   render: function render() {
-    var loader = this.$slots.loader || this.$props.loader;
-    return vue.createVNode("div", {
+    var h = arguments[0];
+    var loader = this.$scopedSlots.loader || this.$props.loader;
+    return h("div", {
       "style": _rollupPluginBabelHelpers._extends({}, style, this.$props.style),
       "class": this.$props.className
     }, [this.renderErrorComponent(), this.isLoading && loader, this.hasCustomRender ? this.getComponent() : null, this.renderMap(this.getMapParams()), this.pagination ? this.renderPagination() : null]);
@@ -835,7 +866,7 @@ var infoWindowMappedProps = {
  */
 function bindEvents(vueInst, googleMapsInst, events) {
   events.forEach(function (eventName) {
-    if (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$attrs[eventName]) {
+    if (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$listeners[eventName]) {
       googleMapsInst.addListener(eventName, function (ev) {
         vueInst.$emit(eventName, ev);
       });
@@ -958,7 +989,7 @@ function bindProps(vueInst, googleMapsInst, props) {
           googleMapsInst[setMethodName](vueInst[attribute]);
         }, vueInst[attribute] !== undefined);
       }
-      if (twoWay && (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$attrs[eventName])) {
+      if (twoWay && (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$listeners[eventName])) {
         googleMapsInst.addListener(eventName, function () {
           vueInst.$emit(eventName, googleMapsInst[getMethodName]());
         });
@@ -1093,9 +1124,10 @@ var InfoWindowClusterManager = {
     }
   },
   render: function render() {
-    return vue.createVNode("div", null, [vue.createVNode("div", {
+    var h = arguments[0];
+    return h("div", [h("div", {
       "ref": "flyaway"
-    }, [this.$slots["default"]()])]);
+    }, [this.$scopedSlots["default"]()])]);
   }
 };
 
@@ -1127,19 +1159,14 @@ var InfoWindowWrapper = {
     }
   },
   render: function render() {
-    var _this = this;
+    var h = arguments[0];
     var renderPopover = this.renderPopover,
       events = this.events;
-    return vue.createVNode(InfoWindowClusterManager, vue.mergeProps({
-      "ref": this.id + "-Info-Window"
-    }, {
-      props: this.infoWindowProps,
-      on: events
-    }), {
-      "default": function _default() {
-        return [vue.createVNode("div", null, [renderPopover(_this.handleClose)])];
-      }
-    });
+    return h(InfoWindowClusterManager, {
+      "ref": this.id + "-Info-Window",
+      "props": _rollupPluginBabelHelpers._extends({}, this.infoWindowProps),
+      "on": _rollupPluginBabelHelpers._extends({}, events)
+    }, [h("div", [renderPopover(this.handleClose)])]);
   }
 };
 
@@ -1309,34 +1336,37 @@ var ClusterMarkers = {
   },
   render: function render() {
     var _this2 = this;
+    var h = arguments[0];
     if (!this.renderPopover) {
       return null;
     }
-    return vue.createVNode("div", null, [Object.keys(this.openMarkers).map(function (markerId) {
+    return h("div", [Object.keys(this.openMarkers).map(function (markerId) {
       var marker = _this2.openMarkers[markerId];
       var item = marker.metaData;
-      return vue.createVNode(InfoWindowWrapper, {
+      return h(InfoWindowWrapper, {
         "key": markerId + "-InfoWindow",
-        "id": markerId,
-        "renderPopover": function renderPopover(_handleClose) {
-          return _this2.renderPopover({
-            item: item,
-            handleClose: function handleClose() {
-              _handleClose();
-              _this2.closeMarker(item);
+        "attrs": {
+          "id": markerId,
+          "renderPopover": function renderPopover(_handleClose) {
+            return _this2.renderPopover({
+              item: item,
+              handleClose: function handleClose() {
+                _handleClose();
+                _this2.closeMarker(item);
+              }
+            });
+          },
+          "marker": marker,
+          "infoWindowProps": {
+            zIndex: 500
+          },
+          "events": {
+            closeclick: function closeclick() {
+              return _this2.closeMarker(marker);
             }
-          });
-        },
-        "marker": marker,
-        "infoWindowProps": {
-          zIndex: 500
-        },
-        "events": {
-          closeclick: function closeclick() {
-            return _this2.closeMarker(marker);
           }
         }
-      }, null);
+      });
     })]);
   }
 };
@@ -1347,6 +1377,7 @@ var ClusterManager = index.connect(function () {
   return null;
 }, mapDispatchToProps$1)(ClusterMarkers);
 
+var InfoWindow = GmapVue.components.InfoWindow;
 var InfoWindowWrapper$1 = {
   name: 'InfoWindowWrapper',
   props: {
@@ -1369,20 +1400,19 @@ var InfoWindowWrapper$1 = {
     }
   },
   render: function render() {
-    var _this = this;
+    var h = arguments[0];
     var renderPopover = this.renderPopover,
       events = this.events;
-    return vue.createVNode(VueGoogleMaps.InfoWindow, vue.mergeProps({
-      "closeclick": "true",
-      "ref": this.id + "-Info-Window"
-    }, this.infoWindowProps, _transformOn(events)), {
-      "default": function _default() {
-        return [vue.createVNode("div", null, [renderPopover(_this.handleClose)])];
-      }
-    });
+    return h(InfoWindow, {
+      "ref": this.id + "-Info-Window",
+      "props": _rollupPluginBabelHelpers._extends({}, this.infoWindowProps),
+      "on": _rollupPluginBabelHelpers._extends({}, events)
+    }, [h("div", [renderPopover(this.handleClose)])]);
   }
 };
 
+var MapElementMixin = GmapVue.components.MapElementMixin;
+
 // Note: This file has been taken from https://github.com/eregnier/vue2-gmap-custom-marker/blob/master/gmap-custom-marker.vue
 var MarkerWithLabel = {
   name: 'MarkerWithLabel',
@@ -1427,7 +1457,7 @@ var MarkerWithLabel = {
       opacity: 0.01
     };
   },
-  mixins: [VueGoogleMaps.MapElementMixin],
+  mixins: [MapElementMixin],
   inject: {
     $clusterPromise: {
       "default": null
@@ -1618,22 +1648,26 @@ var MarkerWithLabel = {
     }
   },
   render: function render() {
-    return vue.createVNode("div", {
+    var h = arguments[0];
+    return h("div", {
       "style": {
         opacity: this.opacity
       },
-      "onmouseover": this.handleMouseOver,
-      "onmouseout": this.handleMouseOut,
-      "onclick": this.handleClick
+      "on": {
+        "mouseover": this.handleMouseOver,
+        "mouseout": this.handleMouseOut,
+        "click": this.handleClick
+      }
     }, [this.renderMarker()]);
   }
 };
 
-var _templateObject, _templateObject2;
-var MapPin = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\theight: 24px;\n\twidth: auto;\n\tbackground-color: #fff;\n\tborder-radius: 2px;\n\tcolor: #222;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);\n\tpadding: 3px 6px;\n\tfont-size: 15px;\n"])));
-var MapPinArrow = vueEmotion.styled('div')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder-color: rgba(0, 0, 0, 0.2);\n\tborder-style: solid;\n\tborder-width: 0 1px 1px 0;\n\tmargin-left: -6px;\n\tbackground-color: #fff;\n\tmargin-top: -6px;\n\twidth: 12px;\n\theight: 12px;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n"])));
-var mapPinWrapper = "\n\t&:hover,\n\t&:focus {\n\t\tz-index: 200;\n\t}\n";
+var _templateObject, _templateObject2, _templateObject3;
+var MapPin = styled__default('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\theight: 24px;\n\twidth: auto;\n\tbackground-color: #fff;\n\tborder-radius: 2px;\n\tcolor: #222;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);\n\tpadding: 3px 6px;\n\tfont-size: 15px;\n"])));
+var MapPinArrow = styled__default('div')(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder-color: rgba(0, 0, 0, 0.2);\n\tborder-style: solid;\n\tborder-width: 0 1px 1px 0;\n\tmargin-left: -6px;\n\tbackground-color: #fff;\n\tmargin-top: -6px;\n\twidth: 12px;\n\theight: 12px;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n"])));
+var mapPinWrapper = styled.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t&:hover,\n\t&:focus {\n\t\tz-index: 200;\n\t}\n"])));
 
+var Marker = GmapVue.components.Marker;
 var recordResultClick$2 = configureStore.Actions.recordResultClick;
 var GoogleMapMarker = {
   name: 'GoogleMapMarker',
@@ -1711,6 +1745,7 @@ var GoogleMapMarker = {
     },
     renderPopoverClick: function renderPopoverClick(item) {
       var _this = this;
+      var h = this.$createElement;
       var additionalProps = {};
       var _this$$props3 = this.$props,
         getPosition = _this$$props3.getPosition,
@@ -1723,35 +1758,38 @@ var GoogleMapMarker = {
         }
       };
       if (item._id in openMarkers) {
-        return vue.createVNode(InfoWindowWrapper$1, {
+        return h(InfoWindowWrapper$1, {
           "key": item._id + "-InfoWindow",
-          "id": item._id,
-          "renderPopover": function renderPopover(_handleClose) {
-            return _renderPopover({
-              item: item,
-              handleClose: function handleClose() {
-                _handleClose();
-                _this.closeMarker();
+          "attrs": {
+            "id": item._id,
+            "renderPopover": function renderPopover(_handleClose) {
+              return _renderPopover({
+                item: item,
+                handleClose: function handleClose() {
+                  _handleClose();
+                  _this.closeMarker();
+                }
+              });
+            },
+            "infoWindowProps": {
+              zIndex: 500,
+              position: additionalProps.position,
+              options: additionalProps.defaultOptions
+            },
+            "events": {
+              closeclick: function closeclick() {
+                return _this.closeMarker();
               }
-            });
-          },
-          "infoWindowProps": {
-            zIndex: 500,
-            position: additionalProps.position,
-            options: additionalProps.defaultOptions
-          },
-          "events": {
-            closeclick: function closeclick() {
-              return _this.closeMarker();
             }
           }
-        }, null);
+        });
       }
       return null;
     }
   },
   render: function render() {
     var _this2 = this;
+    var h = arguments[0];
     var _this$$props4 = this.$props,
       getPosition = _this$$props4.getPosition,
       renderItem = _this$$props4.renderItem,
@@ -1767,70 +1805,74 @@ var GoogleMapMarker = {
       marker.setIcon = this.setIcon;
       var data = renderItem(marker);
       if ('label' in data) {
-        return vue.createVNode(MarkerWithLabel, vue.mergeProps({
+        return h(MarkerWithLabel, {
           "key": marker._id,
-          "metaData": marker,
-          "marker": getPosition(marker),
-          "labelAnchor": new window.google.maps.Point(0, 30),
-          "handleMouseOver": this.increaseMarkerZIndex,
-          "handleMouseOut": this.removeMarkerZIndex,
-          "handleClick": this.openMarker,
-          "zIndex": markerProps.zIndex
-        }, customMarkerProps, {
-          "renderMarker": function renderMarker() {
-            return vue.createVNode("div", {
-              "css": mapPinWrapper
-            }, [vue.createVNode(MapPin, null, {
-              "default": function _default() {
-                return [data.label];
-              }
-            }), vue.createVNode(MapPinArrow, null, null), renderPopover ? _this2.renderPopoverClick(marker, true) : null]);
-          }
-        }), null);
+          "attrs": {
+            "metaData": marker,
+            "marker": getPosition(marker),
+            "labelAnchor": new window.google.maps.Point(0, 30),
+            "handleMouseOver": this.increaseMarkerZIndex,
+            "handleMouseOut": this.removeMarkerZIndex,
+            "handleClick": this.openMarker,
+            "zIndex": markerProps.zIndex,
+            "renderMarker": function renderMarker() {
+              return h("div", {
+                "attrs": {
+                  "css": mapPinWrapper
+                }
+              }, [h(MapPin, [data.label]), h(MapPinArrow), renderPopover ? _this2.renderPopoverClick(marker, true) : null]);
+            }
+          },
+          "props": _rollupPluginBabelHelpers._extends({}, customMarkerProps)
+        });
       }
       if ('icon' in data) {
         markerProps.icon = data.icon;
       } else {
-        return vue.createVNode(MarkerWithLabel, vue.mergeProps({
+        return h(MarkerWithLabel, {
           "key": marker._id,
-          "metaData": marker,
-          "marker": getPosition(marker),
-          "handleClick": this.openMarker,
-          "handleMouseOver": this.increaseMarkerZIndex,
-          "handleMouseOut": this.removeMarkerZIndex,
-          "zIndex": markerProps.zIndex
-        }, customMarkerProps, {
-          "renderMarker": function renderMarker() {
-            return vue.createVNode("div", {
-              "css": mapPinWrapper
-            }, [typeof data.custom === 'function' ? data.custom(marker) : data.custom, renderPopover ? _this2.renderPopoverClick(marker, true) : null]);
-          }
-        }), null);
+          "attrs": {
+            "metaData": marker,
+            "marker": getPosition(marker),
+            "handleClick": this.openMarker,
+            "handleMouseOver": this.increaseMarkerZIndex,
+            "handleMouseOut": this.removeMarkerZIndex,
+            "zIndex": markerProps.zIndex,
+            "renderMarker": function renderMarker() {
+              return h("div", {
+                "attrs": {
+                  "css": mapPinWrapper
+                }
+              }, [typeof data.custom === 'function' ? data.custom(marker) : data.custom, renderPopover ? _this2.renderPopoverClick(marker, true) : null]);
+            }
+          },
+          "props": _rollupPluginBabelHelpers._extends({}, customMarkerProps)
+        });
       }
     } else if (defaultPin) {
       markerProps.icon = {
         url: defaultPin
       };
     }
-    return vue.createVNode(VueGoogleMaps.Marker, vue.mergeProps({
+    return h(Marker, {
       "key": marker._id,
-      "zIndex": markerProps.zIndex,
-      "onClick": function onClick() {
-        return _this2.openMarker();
+      "attrs": {
+        "zIndex": markerProps.zIndex,
+        "position": getPosition(marker),
+        "options": {
+          metaData: marker
+        },
+        "icon": this.markerIcon || markerProps.icon
       },
-      "onMouseover": this.increaseMarkerZIndex,
-      "onMouseout": this.removeMarkerZIndex
-    }, customMarkerProps, {
-      "position": getPosition(marker),
-      "options": {
-        metaData: marker
+      "on": {
+        "click": function click() {
+          return _this2.openMarker();
+        },
+        "mouseover": this.increaseMarkerZIndex,
+        "mouseout": this.removeMarkerZIndex
       },
-      "icon": this.markerIcon || markerProps.icon
-    }), {
-      "default": function _default() {
-        return [renderPopover ? _this2.renderPopoverClick(marker) : null];
-      }
-    });
+      "props": _rollupPluginBabelHelpers._extends({}, customMarkerProps)
+    }, [renderPopover ? this.renderPopoverClick(marker) : null]);
   }
 };
 var mapDispatchToProps$2 = {
@@ -1840,6 +1882,7 @@ var GoogleMapMarker$1 = index.connect(function () {
   return null;
 }, mapDispatchToProps$2)(GoogleMapMarker);
 
+var Cluster = GmapVue.components.Cluster;
 var GoogleMapMarkers = {
   name: 'GoogleMapMarkers',
   props: {
@@ -1886,6 +1929,7 @@ var GoogleMapMarkers = {
   },
   render: function render() {
     var _this = this;
+    var h = arguments[0];
     var resultsToRender = this.$props.resultsToRender;
     var openMarkers = this.openMarkers;
     var markerProps = {
@@ -1903,69 +1947,76 @@ var GoogleMapMarkers = {
       highlightMarkerOnHover: this.highlightMarkerOnHover
     };
     if (this.showMarkerClusters) {
-      return vue.createVNode("div", null, [vue.createVNode(VueGoogleMaps.GMapCluster, vue.mergeProps(this.clusterProps, {
-        "onclick": function onclick(cluster) {
-          var markers = cluster.markers.map(function (i) {
-            return i.metaData;
-          });
-          _this.clickedCluster = cluster;
-          _this.clusterMarkers = markers;
-          _this.$emit('open-cluster-popover', _this.clusterMarkers);
+      return h("div", [h(Cluster, {
+        "props": _rollupPluginBabelHelpers._extends({}, this.clusterProps),
+        "on": {
+          "click": function click(cluster) {
+            var markers = cluster.markers.map(function (i) {
+              return i.metaData;
+            });
+            _this.clickedCluster = cluster;
+            _this.clusterMarkers = markers;
+            _this.$emit('open-cluster-popover', _this.clusterMarkers);
+          }
         },
         "ref": "clusterRef"
-      }), {
-        "default": function _default() {
-          return [vue.createVNode(ClusterManager, vue.mergeProps({
-            "getPosition": markerProps.getPosition,
-            "markers": resultsToRender,
-            "defaultPin": markerProps.defaultPin,
-            "renderItem": markerProps.renderItem,
-            "markerProps": markerProps.markerProps,
-            "handlePreserveCenter": markerProps.handlePreserveCenter,
-            "autoClosePopover": markerProps.autoClosePopover,
-            "renderPopover": markerProps.renderPopover,
-            "highlightMarkerOnHover": markerProps.highlightMarkerOnHover
-          }, {
-            on: _this.$attrs
-          }), null)];
-        }
-      }), this.clickedCluster && this.renderClusterPopover ? vue.createVNode(InfoWindowWrapper$1, {
-        "id": "cluster",
-        "infoWindowProps": {
-          zIndex: 500,
-          position: this.getAdditionalProps().position,
-          options: this.getAdditionalProps().defaultOptions
+      }, [h(ClusterManager, {
+        "attrs": {
+          "getPosition": markerProps.getPosition,
+          "markers": resultsToRender,
+          "defaultPin": markerProps.defaultPin,
+          "renderItem": markerProps.renderItem,
+          "markerProps": markerProps.markerProps,
+          "handlePreserveCenter": markerProps.handlePreserveCenter,
+          "autoClosePopover": markerProps.autoClosePopover,
+          "renderPopover": markerProps.renderPopover,
+          "highlightMarkerOnHover": markerProps.highlightMarkerOnHover
         },
-        "renderPopover": function renderPopover(_handleClose) {
-          return _this.renderClusterPopover({
-            markers: _this.clusterMarkers,
-            cluster: _this.clickedCluster,
-            handleClose: function handleClose() {
-              _handleClose();
-              _this.closeMarker();
-            }
-          });
-        },
-        "events": {
-          closeclick: this.closeMarker
+        "on": _rollupPluginBabelHelpers._extends({}, this.$listeners)
+      })]), this.clickedCluster && this.renderClusterPopover ? h(InfoWindowWrapper$1, {
+        "attrs": {
+          "id": "cluster",
+          "infoWindowProps": {
+            zIndex: 500,
+            position: this.getAdditionalProps().position,
+            options: this.getAdditionalProps().defaultOptions
+          },
+          "renderPopover": function renderPopover(_handleClose) {
+            return _this.renderClusterPopover({
+              markers: _this.clusterMarkers,
+              cluster: _this.clickedCluster,
+              handleClose: function handleClose() {
+                _handleClose();
+                _this.closeMarker();
+              }
+            });
+          },
+          "events": {
+            closeclick: this.closeMarker
+          }
         }
-      }, null) : null]);
+      }) : null]);
     }
-    return vue.createVNode("div", null, [resultsToRender.map(function (marker, index) {
-      return vue.createVNode(GoogleMapMarker$1, vue.mergeProps({
-        "index": index,
-        "marker": marker
-      }, markerProps, _this.$attrs), null);
+    return h("div", [resultsToRender.map(function (marker, index) {
+      return h(GoogleMapMarker$1, {
+        "attrs": {
+          "index": index,
+          "marker": marker
+        },
+        "props": _rollupPluginBabelHelpers._extends({}, markerProps),
+        "on": _rollupPluginBabelHelpers._extends({}, _this.$listeners)
+      });
     })]);
   }
 };
 
-var _templateObject$1;
+var Map = GmapVue.components.MapLayer;
 var ReactiveGoogleMap = {
   name: 'ReactiveGoogleMap',
   props: {
     className: vueTypes.types.string,
     componentId: vueTypes.types.stringRequired,
+    compoundClause: vueTypes.types.compoundClause,
     dataField: vueTypes.types.stringRequired,
     defaultQuery: VueTypes.func,
     loader: vueTypes.types.title,
@@ -1995,22 +2046,18 @@ var ReactiveGoogleMap = {
     calculateMarkers: VueTypes.func,
     highlightMarkerOnHover: VueTypes.bool.def(true)
   },
-  computed: {
-    listeners: function listeners() {
-      var onRE = /^on[^a-z]/;
-      var listeners = {};
-      var $attrs = this.$attrs;
-      for (var property in $attrs) {
-        if (onRE.test(property)) {
-          listeners[property] = $attrs[property];
-        }
-      }
-      return listeners;
-    }
+  created: function created() {
+    var _this = this;
+    this.mapRefPromiseResolve = null;
+    this.mapRefPromiseRejecter = null;
+    this.mapRefPromise = new Promise(function (resolve, reject) {
+      _this.mapRefPromiseResolver = resolve;
+      _this.mapRefPromiseRejecter = reject;
+    });
   },
   methods: {
     renderMap: function renderMap(_ref) {
-      var _this = this;
+      var _this2 = this;
       var resultsToRender = _ref.resultsToRender,
         center = _ref.center,
         zoom = _ref.zoom,
@@ -2022,55 +2069,61 @@ var ReactiveGoogleMap = {
         getPosition = _ref.getPosition,
         autoClosePopover = _ref.autoClosePopover,
         defaultPin = _ref.defaultPin;
+      var h = this.$createElement;
       var style = {
         width: '100%',
         height: '100%',
         position: 'relative'
       };
-      return vue.createVNode("div", {
+      return h("div", {
         "style": style
-      }, [vue.createVNode(VueGoogleMaps.Map, vue.mergeProps({
+      }, [h(Map, {
         "ref": "mapRef",
-        "map-type-id": "terrain",
+        "attrs": {
+          "map-type-id": "terrain",
+          "options": {
+            zoomControl: true
+          },
+          "center": center,
+          "zoom": zoom
+        },
         "style": {
           height: '100%'
         },
-        "class": emotion.css(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t"]))),
-        "options": {
-          zoomControl: true
-        },
-        "center": center,
-        "zoom": zoom
-      }, this.mapProps, {
-        "onzoom_changed": handleZoomChange,
-        "ondragend": handleOnDragEnd,
-        "onidle": handleOnIdle
-      }), {
-        "default": function _default() {
-          return [_this.showMarkers ? vue.createVNode(GoogleMapMarkers, vue.mergeProps({
-            "resultsToRender": resultsToRender,
-            "getPosition": getPosition,
-            "markerProps": _this.markerProps,
-            "clusterProps": _this.clusterProps,
-            "handlePreserveCenter": handlePreserveCenter,
-            "highlightMarkerOnHover": _this.highlightMarkerOnHover,
-            "renderItem": _this.$slots.renderItem ? function () {
-              return {
-                custom: _this.$slots.renderItem
-              };
-            } : _this.renderItem,
-            "defaultPin": defaultPin,
-            "autoClosePopover": autoClosePopover,
-            "renderPopover": _this.$slots.renderPopover,
-            "renderClusterPopover": _this.$slots.renderClusterPopover,
-            "showMarkerClusters": _this.showMarkerClusters
-          }, _this.listeners), null) : null];
+        "props": _rollupPluginBabelHelpers._extends({}, this.mapProps),
+        "on": {
+          "zoom_changed": handleZoomChange,
+          "dragend": handleOnDragEnd,
+          "idle": handleOnIdle
         }
-      }), renderSearchAsMove()]);
+      }, [this.showMarkers ? h(GoogleMapMarkers, {
+        "attrs": {
+          "resultsToRender": resultsToRender,
+          "getPosition": getPosition,
+          "markerProps": this.markerProps,
+          "clusterProps": this.clusterProps,
+          "handlePreserveCenter": handlePreserveCenter,
+          "highlightMarkerOnHover": this.highlightMarkerOnHover,
+          "renderItem": this.$scopedSlots.renderItem ? function () {
+            return {
+              custom: _this2.$scopedSlots.renderItem
+            };
+          } : this.renderItem,
+          "defaultPin": defaultPin,
+          "autoClosePopover": autoClosePopover,
+          "renderPopover": this.$scopedSlots.renderPopover,
+          "renderClusterPopover": this.$scopedSlots.renderClusterPopover,
+          "showMarkerClusters": this.showMarkerClusters
+        },
+        "on": _rollupPluginBabelHelpers._extends({}, this.$listeners)
+      }) : null]), renderSearchAsMove()]);
     },
     getMapRef: function getMapRef() {
       return this.mapRef;
     },
+    getMapRefPromise: function getMapRefPromise() {
+      return this.mapRefPromise;
+    },
     removeMarkers: function removeMarkers() {
       var clusterManagerInstance;
       var currentInstance = this;
@@ -2078,7 +2131,6 @@ var ReactiveGoogleMap = {
         if (currentInstance && currentInstance.$options && currentInstance.$options.name === 'connect-ClusterMarkers') {
           clusterManagerInstance = currentInstance;
           currentInstance = null;
-          // TODO: Check if $children works in vue 3
         } else if (currentInstance.$children) {
           var _currentInstance$$chi = currentInstance.$children;
           currentInstance = _currentInstance$$chi[0];
@@ -2092,46 +2144,52 @@ var ReactiveGoogleMap = {
     }
   },
   mounted: function mounted() {
-    var _this2 = this;
+    var _this3 = this;
     if (this.$refs.mapRef) {
       this.$refs.mapRef.$mapPromise.then(function (map) {
-        _this2.mapRef = map;
-      });
+        _this3.mapRef = map;
+        _this3.mapRefPromiseResolver(_this3.mapRef);
+      })["catch"](this.mapRefPromiseRejecter);
     }
   },
   render: function render() {
-    return vue.createVNode(RMConnected, vue.mergeProps({
-      "getMapRef": this.getMapRef,
-      "renderMap": this.renderMap,
-      "componentId": this.componentId,
-      "className": this.className,
-      "dataField": this.dataField,
-      "defaultZoom": this.defaultZoom,
-      "react": this.react,
-      "size": this.size,
-      "sortBy": this.sortBy,
-      "pagination": this.pagination,
-      "URLParams": this.URLParams,
-      "defaultSearchAsMove": this.searchAsMove,
-      "showSearchAsMove": this.showSearchAsMove,
-      "searchAsMoveLabel": this.searchAsMoveLabel,
-      "showMarkers": this.showMarkers,
-      "markerProps": this.markerProps,
-      "autoClosePopover": this.autoClosePopover,
-      "defaultPin": this.defaultPin,
-      "defaultQuery": this.defaultQuery,
-      "autoCenter": this.autoCenter,
-      "defaultCenter": this.defaultCenter,
-      "defaultRadius": this.defaultRadius,
-      "unit": this.unit,
-      "pages": this.pages,
-      "center": this.center,
-      "loader": this.loader,
-      "calculateMarkers": this.calculateMarkers
+    var h = arguments[0];
+    return h(RMConnected, _mergeJSXProps([{
+      "attrs": {
+        "getMapRef": this.getMapRef,
+        "getMapPromise": this.getMapRefPromise,
+        "renderMap": this.renderMap,
+        "componentId": this.componentId,
+        "compoundClause": this.compoundClause,
+        "className": this.className,
+        "dataField": this.dataField,
+        "defaultZoom": this.defaultZoom,
+        "react": this.react,
+        "size": this.size,
+        "sortBy": this.sortBy,
+        "pagination": this.pagination,
+        "uRLParams": this.URLParams,
+        "defaultSearchAsMove": this.searchAsMove,
+        "showSearchAsMove": this.showSearchAsMove,
+        "searchAsMoveLabel": this.searchAsMoveLabel,
+        "showMarkers": this.showMarkers,
+        "markerProps": this.markerProps,
+        "autoClosePopover": this.autoClosePopover,
+        "defaultPin": this.defaultPin,
+        "defaultQuery": this.defaultQuery,
+        "autoCenter": this.autoCenter,
+        "defaultCenter": this.defaultCenter,
+        "defaultRadius": this.defaultRadius,
+        "unit": this.unit,
+        "pages": this.pages,
+        "center": this.center,
+        "loader": this.loader,
+        "calculateMarkers": this.calculateMarkers
+      }
     }, {
-      scopedSlots: this.$slots,
-      on: this.$attrs
-    }), null);
+      scopedSlots: this.$scopedSlots,
+      on: this.$listeners
+    }]));
   }
 };
 ReactiveGoogleMap.install = function (Vue, options) {
@@ -2139,7 +2197,7 @@ ReactiveGoogleMap.install = function (Vue, options) {
   if (!options || !options.key) {
     console.error('ReactiveSearch: map key is required to use ReactiveGoogleMap component');
   }
-  Vue.use(VueGoogleMaps__default, {
+  Vue.use(GmapVue__default, {
     load: {
       key: options.key,
       libraries: 'places'