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

package/dist/es/ReactiveGoogleMap.js

@@ -1,22 +1,21 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey, d as _inheritsLoose, _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-ded08042.js';
-import { createVNode, mergeProps } from 'vue';
 import VueTypes from 'vue-types';
-import { styled } from '@appbaseio/vue-emotion';
-import { css } from 'emotion';
+import 'emotion';
+import styled, { css } from '@appbaseio/vue-emotion';
 import 'polished';
-import './Button-ebafa3d6.js';
-import { t as types } from './vueTypes-e4af6fe2.js';
-import { P as Pagination } from './Pagination-145b4ff2.js';
+import './Button-153cd885.js';
+import { t as types } from './vueTypes-66ebc93e.js';
+import { P as Pagination } from './Pagination-edeb7dbe.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';
-import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, a as isFunction, c as connect } from './index-285a43a6.js';
-import { C as ComponentWrapper } from './ComponentWrapper-bf443c0b.js';
-import { P as PreferencesConsumer } from './PreferencesConsumer-7ea7313a.js';
-import _transformOn from '@vue/babel-helper-vue-transform-on';
-import { C as Checkbox } from './FormControlList-fa5cf78b.js';
-import VueGoogleMaps, { InfoWindow, MapElementMixin, Marker, GMapCluster, Map } from 'vue-google-maps-community-fork';
+import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, a as isFunction, c as connect } from './index-5509c0bc.js';
+import { C as ComponentWrapper } from './ComponentWrapper-edaeaceb.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-86a676c8.js';
+import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
+import { C as Checkbox } from './FormControlList-99797d0a.js';
+import GmapVue, { components } from 'gmap-vue';
 import geohash from 'ngeohash';
 
 var setStreaming = Actions.setStreaming,
@@ -108,6 +107,7 @@ var ReactiveMap = {
     URLParams: VueTypes.bool,
     autoCenter: VueTypes.bool,
     getMapRef: VueTypes.func.isRequired,
+    getMapPromise: VueTypes.func,
     center: types.location,
     defaultCenter: types.location,
     defaultPin: types.string,
@@ -175,32 +175,37 @@ var ReactiveMap = {
       }
     },
     defaultQuery: function defaultQuery(newVal, oldVal) {
+      var _this = this;
       if (!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 = _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 = _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) {
@@ -228,7 +233,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;
@@ -247,10 +252,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 _extends({}, item, (_extends2 = {}, _extends2[_this.dataField] = getLocationObject(item[_this.dataField]), _extends2));
+          return _extends({}, item, (_extends2 = {}, _extends2[_this2.dataField] = getLocationObject(item[_this2.dataField]), _extends2));
         });
         this.filteredResults = this.addNoise(filteredResults);
         if (this.calculateMarkers) {
@@ -295,15 +300,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 = _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;
       });
@@ -316,9 +321,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;
@@ -357,7 +362,7 @@ var ReactiveMap = {
       return false;
     },
     getCenter: function getCenter(hits) {
-      var _this4 = this;
+      var _this5 = this;
       if (this.center) {
         return this.parseLocation(this.center);
       }
@@ -365,7 +370,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(),
@@ -423,12 +428,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;
     },
@@ -564,7 +571,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
@@ -632,15 +640,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 isFunction(renderError) ? renderError(this.error) : renderError;
       }
       return null;
     },
     renderSearchAsMove: function renderSearchAsMove() {
+      var h = this.$createElement;
       if (this.showSearchAsMove) {
-        return createVNode("div", {
+        return h("div", {
           "style": {
             position: 'absolute',
             bottom: '30px',
@@ -652,29 +661,40 @@ var ReactiveMap = {
             borderRadius: 2,
             zIndex: 10000
           },
-          "className": getClassName(this.innerClass, 'checkboxContainer') || null
-        }, [createVNode(Checkbox, {
-          "type": "checkbox",
+          "attrs": {
+            "className": getClassName(this.innerClass, 'checkboxContainer') || null
+          }
+        }, [h(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), 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 createVNode(Pagination, {
-        "pages": this.pages,
-        "totalPages": this.totalPages,
-        "currentPage": this.currentPageState,
-        "setPage": this.setPage,
-        "innerClass": this.innerClass
-      }, null);
+      var h = this.$createElement;
+      return h(Pagination, {
+        "attrs": {
+          "pages": this.pages,
+          "totalPages": this.totalPages,
+          "currentPage": this.currentPageState,
+          "setPage": this.setPage,
+          "innerClass": this.innerClass
+        }
+      });
     }
   },
   created: function created() {
@@ -689,73 +709,82 @@ var ReactiveMap = {
     this.updateComponentProps(this.internalComponent, {
       from: this.from
     }, 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 = _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 = _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 createVNode("div", {
+    var h = arguments[0];
+    var loader = this.$scopedSlots.loader || this.$props.loader;
+    return h("div", {
       "style": _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]);
@@ -827,7 +856,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);
       });
@@ -950,7 +979,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]());
         });
@@ -1085,9 +1114,10 @@ var InfoWindowClusterManager = {
     }
   },
   render: function render() {
-    return createVNode("div", null, [createVNode("div", {
+    var h = arguments[0];
+    return h("div", [h("div", {
       "ref": "flyaway"
-    }, [this.$slots["default"]()])]);
+    }, [this.$scopedSlots["default"]()])]);
   }
 };
 
@@ -1119,19 +1149,14 @@ var InfoWindowWrapper = {
     }
   },
   render: function render() {
-    var _this = this;
+    var h = arguments[0];
     var renderPopover = this.renderPopover,
       events = this.events;
-    return createVNode(InfoWindowClusterManager, mergeProps({
-      "ref": this.id + "-Info-Window"
-    }, {
-      props: this.infoWindowProps,
-      on: events
-    }), {
-      "default": function _default() {
-        return [createVNode("div", null, [renderPopover(_this.handleClose)])];
-      }
-    });
+    return h(InfoWindowClusterManager, {
+      "ref": this.id + "-Info-Window",
+      "props": _extends({}, this.infoWindowProps),
+      "on": _extends({}, events)
+    }, [h("div", [renderPopover(this.handleClose)])]);
   }
 };
 
@@ -1301,34 +1326,37 @@ var ClusterMarkers = {
   },
   render: function render() {
     var _this2 = this;
+    var h = arguments[0];
     if (!this.renderPopover) {
       return null;
     }
-    return 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 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);
+      });
     })]);
   }
 };
@@ -1339,6 +1367,7 @@ var ClusterManager = connect(function () {
   return null;
 }, mapDispatchToProps$1)(ClusterMarkers);
 
+var InfoWindow = components.InfoWindow;
 var InfoWindowWrapper$1 = {
   name: 'InfoWindowWrapper',
   props: {
@@ -1361,20 +1390,19 @@ var InfoWindowWrapper$1 = {
     }
   },
   render: function render() {
-    var _this = this;
+    var h = arguments[0];
     var renderPopover = this.renderPopover,
       events = this.events;
-    return createVNode(InfoWindow, mergeProps({
-      "closeclick": "true",
-      "ref": this.id + "-Info-Window"
-    }, this.infoWindowProps, _transformOn(events)), {
-      "default": function _default() {
-        return [createVNode("div", null, [renderPopover(_this.handleClose)])];
-      }
-    });
+    return h(InfoWindow, {
+      "ref": this.id + "-Info-Window",
+      "props": _extends({}, this.infoWindowProps),
+      "on": _extends({}, events)
+    }, [h("div", [renderPopover(this.handleClose)])]);
   }
 };
 
+var MapElementMixin = 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',
@@ -1610,22 +1638,26 @@ var MarkerWithLabel = {
     }
   },
   render: function render() {
-    return 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 _templateObject, _templateObject2, _templateObject3;
 var MapPin = styled('div')(_templateObject || (_templateObject = _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('div')(_templateObject2 || (_templateObject2 = _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 mapPinWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\t&:hover,\n\t&:focus {\n\t\tz-index: 200;\n\t}\n"])));
 
+var Marker = components.Marker;
 var recordResultClick$2 = Actions.recordResultClick;
 var GoogleMapMarker = {
   name: 'GoogleMapMarker',
@@ -1703,6 +1735,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,
@@ -1715,35 +1748,38 @@ var GoogleMapMarker = {
         }
       };
       if (item._id in openMarkers) {
-        return 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,
@@ -1759,70 +1795,74 @@ var GoogleMapMarker = {
       marker.setIcon = this.setIcon;
       var data = renderItem(marker);
       if ('label' in data) {
-        return createVNode(MarkerWithLabel, 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 createVNode("div", {
-              "css": mapPinWrapper
-            }, [createVNode(MapPin, null, {
-              "default": function _default() {
-                return [data.label];
-              }
-            }), 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": _extends({}, customMarkerProps)
+        });
       }
       if ('icon' in data) {
         markerProps.icon = data.icon;
       } else {
-        return createVNode(MarkerWithLabel, 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 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": _extends({}, customMarkerProps)
+        });
       }
     } else if (defaultPin) {
       markerProps.icon = {
         url: defaultPin
       };
     }
-    return createVNode(Marker, 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": _extends({}, customMarkerProps)
+    }, [renderPopover ? this.renderPopoverClick(marker) : null]);
   }
 };
 var mapDispatchToProps$2 = {
@@ -1832,6 +1872,7 @@ var GoogleMapMarker$1 = connect(function () {
   return null;
 }, mapDispatchToProps$2)(GoogleMapMarker);
 
+var Cluster = components.Cluster;
 var GoogleMapMarkers = {
   name: 'GoogleMapMarkers',
   props: {
@@ -1878,6 +1919,7 @@ var GoogleMapMarkers = {
   },
   render: function render() {
     var _this = this;
+    var h = arguments[0];
     var resultsToRender = this.$props.resultsToRender;
     var openMarkers = this.openMarkers;
     var markerProps = {
@@ -1895,64 +1937,70 @@ var GoogleMapMarkers = {
       highlightMarkerOnHover: this.highlightMarkerOnHover
     };
     if (this.showMarkerClusters) {
-      return createVNode("div", null, [createVNode(GMapCluster, 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": _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 [createVNode(ClusterManager, 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 ? 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": _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 createVNode("div", null, [resultsToRender.map(function (marker, index) {
-      return createVNode(GoogleMapMarker$1, 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": _extends({}, markerProps),
+        "on": _extends({}, _this.$listeners)
+      });
     })]);
   }
 };
 
-var _templateObject$1;
+var Map = components.MapLayer;
 var ReactiveGoogleMap = {
   name: 'ReactiveGoogleMap',
   props: {
@@ -1987,22 +2035,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,
@@ -2014,55 +2058,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 createVNode("div", {
+      return h("div", {
         "style": style
-      }, [createVNode(Map, 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": css(_templateObject$1 || (_templateObject$1 = _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 ? createVNode(GoogleMapMarkers, 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": _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": _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;
@@ -2070,7 +2120,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];
@@ -2084,46 +2133,51 @@ 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 createVNode(RMConnected, 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,
+        "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) {
@@ -2131,7 +2185,7 @@ ReactiveGoogleMap.install = function (Vue, options) {
   if (!options || !options.key) {
     console.error('ReactiveSearch: map key is required to use ReactiveGoogleMap component');
   }
-  Vue.use(VueGoogleMaps, {
+  Vue.use(GmapVue, {
     load: {
       key: options.key,
       libraries: 'places'