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

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'));
-require('emotion');
-var styled = require('@appbaseio/vue-emotion');
-var styled__default = _interopDefault(styled);
+var vueEmotion = require('@appbaseio/vue-emotion');
+var emotion = require('emotion');
 require('polished');
-require('./Button-841fd06d.js');
-var vueTypes = require('./vueTypes-7cfc2f98.js');
-var Pagination = require('./Pagination-07f4dbad.js');
+require('./Button-626c5e8e.js');
+var vueTypes = require('./vueTypes-621a8143.js');
+var Pagination = require('./Pagination-a468f960.js');
 require('@appbaseio/reactivecore/lib/utils/transform');
 require('redux');
-var index = require('./index-30126fd0.js');
-var ComponentWrapper = require('./ComponentWrapper-b6d4660c.js');
-var PreferencesConsumer = require('./PreferencesConsumer-5d67b486.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 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 geohash = _interopDefault(require('ngeohash'));
 
 var setStreaming = configureStore.Actions.setStreaming,
@@ -640,16 +640,15 @@ var ReactiveMap = {
       this.$emit('search-as-move', this.searchAsMove);
     },
     renderErrorComponent: function renderErrorComponent() {
-      var renderError = this.$scopedSlots.renderError || this.$props.renderError;
+      var renderError = this.$slots.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 h("div", {
+        return vue.createVNode("div", {
           "style": {
             position: 'absolute',
             bottom: '30px',
@@ -661,40 +660,29 @@ var ReactiveMap = {
             borderRadius: 2,
             zIndex: 10000
           },
-          "attrs": {
-            "className": getClassName(this.innerClass, 'checkboxContainer') || null
-          }
-        }, [h(FormControlList.Checkbox, {
-          "attrs": {
-            "type": "checkbox",
-            "id": this.$props.componentId + "-searchasmove",
-            "checked": this.searchAsMove,
-            "show": true
-          },
+          "className": getClassName(this.innerClass, 'checkboxContainer') || null
+        }, [vue.createVNode(FormControlList.Checkbox, {
+          "type": "checkbox",
           "class": getClassName(this.$props.innerClass, 'checkbox'),
-          "on": {
-            "click": this.toggleSearchAsMove
-          }
-        }), h("label", {
-          "attrs": {
-            "className": getClassName(this.innerClass, 'label') || null,
-            "for": this.$props.componentId + "-searchasmove"
-          }
+          "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"
         }, [this.searchAsMoveLabel])]);
       }
       return null;
     },
     renderPagination: function renderPagination() {
-      var h = this.$createElement;
-      return h(Pagination.Pagination, {
-        "attrs": {
-          "pages": this.pages,
-          "totalPages": this.totalPages,
-          "currentPage": this.currentPageState,
-          "setPage": this.setPage,
-          "innerClass": this.innerClass
-        }
-      });
+      return vue.createVNode(Pagination.Pagination, {
+        "pages": this.pages,
+        "totalPages": this.totalPages,
+        "currentPage": this.currentPageState,
+        "setPage": this.setPage,
+        "innerClass": this.innerClass
+      }, null);
     }
   },
   created: function created() {
@@ -774,9 +762,8 @@ var ReactiveMap = {
     this.setQueryOptions(this.componentId, options, !(this.$defaultQuery && this.$defaultQuery.query));
   },
   render: function render() {
-    var h = arguments[0];
-    var loader = this.$scopedSlots.loader || this.$props.loader;
-    return h("div", {
+    var loader = this.$slots.loader || this.$props.loader;
+    return vue.createVNode("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]);
@@ -848,7 +835,7 @@ var infoWindowMappedProps = {
  */
 function bindEvents(vueInst, googleMapsInst, events) {
   events.forEach(function (eventName) {
-    if (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$listeners[eventName]) {
+    if (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$attrs[eventName]) {
       googleMapsInst.addListener(eventName, function (ev) {
         vueInst.$emit(eventName, ev);
       });
@@ -971,7 +958,7 @@ function bindProps(vueInst, googleMapsInst, props) {
           googleMapsInst[setMethodName](vueInst[attribute]);
         }, vueInst[attribute] !== undefined);
       }
-      if (twoWay && (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$listeners[eventName])) {
+      if (twoWay && (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$attrs[eventName])) {
         googleMapsInst.addListener(eventName, function () {
           vueInst.$emit(eventName, googleMapsInst[getMethodName]());
         });
@@ -1106,10 +1093,9 @@ var InfoWindowClusterManager = {
     }
   },
   render: function render() {
-    var h = arguments[0];
-    return h("div", [h("div", {
+    return vue.createVNode("div", null, [vue.createVNode("div", {
       "ref": "flyaway"
-    }, [this.$scopedSlots["default"]()])]);
+    }, [this.$slots["default"]()])]);
   }
 };
 
@@ -1141,14 +1127,19 @@ var InfoWindowWrapper = {
     }
   },
   render: function render() {
-    var h = arguments[0];
+    var _this = this;
     var renderPopover = this.renderPopover,
       events = this.events;
-    return h(InfoWindowClusterManager, {
-      "ref": this.id + "-Info-Window",
-      "props": _rollupPluginBabelHelpers._extends({}, this.infoWindowProps),
-      "on": _rollupPluginBabelHelpers._extends({}, events)
-    }, [h("div", [renderPopover(this.handleClose)])]);
+    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)])];
+      }
+    });
   }
 };
 
@@ -1318,37 +1309,34 @@ var ClusterMarkers = {
   },
   render: function render() {
     var _this2 = this;
-    var h = arguments[0];
     if (!this.renderPopover) {
       return null;
     }
-    return h("div", [Object.keys(this.openMarkers).map(function (markerId) {
+    return vue.createVNode("div", null, [Object.keys(this.openMarkers).map(function (markerId) {
       var marker = _this2.openMarkers[markerId];
       var item = marker.metaData;
-      return h(InfoWindowWrapper, {
+      return vue.createVNode(InfoWindowWrapper, {
         "key": markerId + "-InfoWindow",
-        "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);
+        "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);
           }
         }
-      });
+      }, null);
     })]);
   }
 };
@@ -1359,7 +1347,6 @@ var ClusterManager = index.connect(function () {
   return null;
 }, mapDispatchToProps$1)(ClusterMarkers);
 
-var InfoWindow = GmapVue.components.InfoWindow;
 var InfoWindowWrapper$1 = {
   name: 'InfoWindowWrapper',
   props: {
@@ -1382,19 +1369,20 @@ var InfoWindowWrapper$1 = {
     }
   },
   render: function render() {
-    var h = arguments[0];
+    var _this = this;
     var renderPopover = this.renderPopover,
       events = this.events;
-    return h(InfoWindow, {
-      "ref": this.id + "-Info-Window",
-      "props": _rollupPluginBabelHelpers._extends({}, this.infoWindowProps),
-      "on": _rollupPluginBabelHelpers._extends({}, events)
-    }, [h("div", [renderPopover(this.handleClose)])]);
+    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)])];
+      }
+    });
   }
 };
 
-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',
@@ -1439,7 +1427,7 @@ var MarkerWithLabel = {
       opacity: 0.01
     };
   },
-  mixins: [MapElementMixin],
+  mixins: [VueGoogleMaps.MapElementMixin],
   inject: {
     $clusterPromise: {
       "default": null
@@ -1630,26 +1618,22 @@ var MarkerWithLabel = {
     }
   },
   render: function render() {
-    var h = arguments[0];
-    return h("div", {
+    return vue.createVNode("div", {
       "style": {
         opacity: this.opacity
       },
-      "on": {
-        "mouseover": this.handleMouseOver,
-        "mouseout": this.handleMouseOut,
-        "click": this.handleClick
-      }
+      "onmouseover": this.handleMouseOver,
+      "onmouseout": this.handleMouseOut,
+      "onclick": this.handleClick
     }, [this.renderMarker()]);
   }
 };
 
-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 _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 Marker = GmapVue.components.Marker;
 var recordResultClick$2 = configureStore.Actions.recordResultClick;
 var GoogleMapMarker = {
   name: 'GoogleMapMarker',
@@ -1727,7 +1711,6 @@ var GoogleMapMarker = {
     },
     renderPopoverClick: function renderPopoverClick(item) {
       var _this = this;
-      var h = this.$createElement;
       var additionalProps = {};
       var _this$$props3 = this.$props,
         getPosition = _this$$props3.getPosition,
@@ -1740,38 +1723,35 @@ var GoogleMapMarker = {
         }
       };
       if (item._id in openMarkers) {
-        return h(InfoWindowWrapper$1, {
+        return vue.createVNode(InfoWindowWrapper$1, {
           "key": item._id + "-InfoWindow",
-          "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();
+          "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();
             }
           }
-        });
+        }, 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,
@@ -1787,74 +1767,70 @@ var GoogleMapMarker = {
       marker.setIcon = this.setIcon;
       var data = renderItem(marker);
       if ('label' in data) {
-        return h(MarkerWithLabel, {
+        return vue.createVNode(MarkerWithLabel, vue.mergeProps({
           "key": marker._id,
-          "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)
-        });
+          "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);
       }
       if ('icon' in data) {
         markerProps.icon = data.icon;
       } else {
-        return h(MarkerWithLabel, {
+        return vue.createVNode(MarkerWithLabel, vue.mergeProps({
           "key": marker._id,
-          "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)
-        });
+          "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);
       }
     } else if (defaultPin) {
       markerProps.icon = {
         url: defaultPin
       };
     }
-    return h(Marker, {
+    return vue.createVNode(VueGoogleMaps.Marker, vue.mergeProps({
       "key": marker._id,
-      "attrs": {
-        "zIndex": markerProps.zIndex,
-        "position": getPosition(marker),
-        "options": {
-          metaData: marker
-        },
-        "icon": this.markerIcon || markerProps.icon
+      "zIndex": markerProps.zIndex,
+      "onClick": function onClick() {
+        return _this2.openMarker();
       },
-      "on": {
-        "click": function click() {
-          return _this2.openMarker();
-        },
-        "mouseover": this.increaseMarkerZIndex,
-        "mouseout": this.removeMarkerZIndex
+      "onMouseover": this.increaseMarkerZIndex,
+      "onMouseout": this.removeMarkerZIndex
+    }, customMarkerProps, {
+      "position": getPosition(marker),
+      "options": {
+        metaData: marker
       },
-      "props": _rollupPluginBabelHelpers._extends({}, customMarkerProps)
-    }, [renderPopover ? this.renderPopoverClick(marker) : null]);
+      "icon": this.markerIcon || markerProps.icon
+    }), {
+      "default": function _default() {
+        return [renderPopover ? _this2.renderPopoverClick(marker) : null];
+      }
+    });
   }
 };
 var mapDispatchToProps$2 = {
@@ -1864,7 +1840,6 @@ var GoogleMapMarker$1 = index.connect(function () {
   return null;
 }, mapDispatchToProps$2)(GoogleMapMarker);
 
-var Cluster = GmapVue.components.Cluster;
 var GoogleMapMarkers = {
   name: 'GoogleMapMarkers',
   props: {
@@ -1911,7 +1886,6 @@ var GoogleMapMarkers = {
   },
   render: function render() {
     var _this = this;
-    var h = arguments[0];
     var resultsToRender = this.$props.resultsToRender;
     var openMarkers = this.openMarkers;
     var markerProps = {
@@ -1929,70 +1903,64 @@ var GoogleMapMarkers = {
       highlightMarkerOnHover: this.highlightMarkerOnHover
     };
     if (this.showMarkerClusters) {
-      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);
-          }
+      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);
         },
         "ref": "clusterRef"
-      }, [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
+      }), {
+        "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
         },
-        "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
-          }
+        "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 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)
-      });
+    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);
     })]);
   }
 };
 
-var Map = GmapVue.components.MapLayer;
+var _templateObject$1;
 var ReactiveGoogleMap = {
   name: 'ReactiveGoogleMap',
   props: {
@@ -2027,6 +1995,19 @@ 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;
+    }
+  },
   methods: {
     renderMap: function renderMap(_ref) {
       var _this = this;
@@ -2041,54 +2022,51 @@ var ReactiveGoogleMap = {
         getPosition = _ref.getPosition,
         autoClosePopover = _ref.autoClosePopover,
         defaultPin = _ref.defaultPin;
-      var h = this.$createElement;
       var style = {
         width: '100%',
         height: '100%',
         position: 'relative'
       };
-      return h("div", {
+      return vue.createVNode("div", {
         "style": style
-      }, [h(Map, {
+      }, [vue.createVNode(VueGoogleMaps.Map, vue.mergeProps({
         "ref": "mapRef",
-        "attrs": {
-          "map-type-id": "terrain",
-          "options": {
-            zoomControl: true
-          },
-          "center": center,
-          "zoom": zoom
-        },
+        "map-type-id": "terrain",
         "style": {
           height: '100%'
         },
-        "props": _rollupPluginBabelHelpers._extends({}, this.mapProps),
-        "on": {
-          "zoom_changed": handleZoomChange,
-          "dragend": handleOnDragEnd,
-          "idle": handleOnIdle
-        }
-      }, [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: _this.$scopedSlots.renderItem
-            };
-          } : this.renderItem,
-          "defaultPin": defaultPin,
-          "autoClosePopover": autoClosePopover,
-          "renderPopover": this.$scopedSlots.renderPopover,
-          "renderClusterPopover": this.$scopedSlots.renderClusterPopover,
-          "showMarkerClusters": this.showMarkerClusters
+        "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
         },
-        "on": _rollupPluginBabelHelpers._extends({}, this.$listeners)
-      }) : null]), renderSearchAsMove()]);
+        "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];
+        }
+      }), renderSearchAsMove()]);
     },
     getMapRef: function getMapRef() {
       return this.mapRef;
@@ -2100,6 +2078,7 @@ 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];
@@ -2121,41 +2100,38 @@ var ReactiveGoogleMap = {
     }
   },
   render: function render() {
-    var h = arguments[0];
-    return h(RMConnected, _mergeJSXProps([{
-      "attrs": {
-        "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
-      }
+    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
     }, {
-      scopedSlots: this.$scopedSlots,
-      on: this.$listeners
-    }]));
+      scopedSlots: this.$slots,
+      on: this.$attrs
+    }), null);
   }
 };
 ReactiveGoogleMap.install = function (Vue, options) {
@@ -2163,7 +2139,7 @@ ReactiveGoogleMap.install = function (Vue, options) {
   if (!options || !options.key) {
     console.error('ReactiveSearch: map key is required to use ReactiveGoogleMap component');
   }
-  Vue.use(GmapVue__default, {
+  Vue.use(VueGoogleMaps__default, {
     load: {
       key: options.key,
       libraries: 'places'