@appbaseio/reactivesearch-vue 2.0.0-alpha.4 → 3.0.0-alpha.1

package/dist/es/ReactiveGoogleMap.js

@@ -1,38 +1,41 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey, d as _inheritsLoose, _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-76660dab.js';
-import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
-import 'emotion';
-import styled, { css } from '@appbaseio/vue-emotion';
+import _transformOn from '@vue/babel-helper-vue-transform-on';
+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 'polished';
-import './Button-d8bc15ea.js';
-import { t as types } from './vueTypes-b8146772.js';
-import { P as Pagination } from './Pagination-784bf143.js';
+import './Button-474510e3.js';
+import { t as types } from './vueTypes-f1923c72.js';
+import { P as Pagination } from './Pagination-72bd1d9e.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-7788a843.js';
-import { C as ComponentWrapper } from './ComponentWrapper-424e86fd.js';
-import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import { C as Checkbox } from './FormControlList-c22d64f6.js';
-import GmapVue, { components } from 'gmap-vue';
+import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, a as isFunction, c as connect } from './index-4520a598.js';
+import { C as ComponentWrapper } from './ComponentWrapper-3dfe6931.js';
+import { P as PreferencesConsumer } from './PreferencesConsumer-24e88f3b.js';
+import { C as Checkbox } from './FormControlList-fe6eaee4.js';
+import VueGoogleMaps, { InfoWindow, MapElementMixin, Marker, GMapCluster, Map } from 'vue-google-maps-community-fork';
 import geohash from 'ngeohash';
 
 var setStreaming = Actions.setStreaming,
-    setQueryOptions = Actions.setQueryOptions,
-    updateQuery = Actions.updateQuery,
-    loadMore = Actions.loadMore,
-    setValue = Actions.setValue,
-    updateComponentProps = Actions.updateComponentProps,
-    setDefaultQuery = Actions.setDefaultQuery,
-    recordResultClick = Actions.recordResultClick,
-    setMapData = Actions.setMapData;
+  setQueryOptions = Actions.setQueryOptions,
+  updateQuery = Actions.updateQuery,
+  loadMore = Actions.loadMore,
+  setValue = Actions.setValue,
+  updateComponentProps = Actions.updateComponentProps,
+  setDefaultQuery = Actions.setDefaultQuery,
+  recordResultClick = Actions.recordResultClick,
+  setMapData = Actions.setMapData;
 var isEqual = helper.isEqual,
-    getQueryOptions = helper.getQueryOptions,
-    getClassName = helper.getClassName,
-    parseHits = helper.parseHits,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
-    getResultStats = helper.getResultStats; // default map center
+  getQueryOptions = helper.getQueryOptions,
+  getClassName = helper.getClassName,
+  parseHits = helper.parseHits,
+  getOptionsFromQuery = helper.getOptionsFromQuery,
+  getResultStats = helper.getResultStats;
 
+// default map center
 var MAP_CENTER = {
   lat: 37.7749,
   lng: 122.4194
@@ -42,37 +45,28 @@ var style = {
   height: '100vh',
   position: 'relative'
 };
-
 function getPrecision(a) {
   if (isNaN(a)) return 0; // eslint-disable-line
-
   var e = 1;
   var p = 0;
-
   while (Math.round(a * e) / e !== a) {
     e *= 10;
     p += 1;
   }
-
   return p;
 }
-
 function withDistinctLat(loc, count) {
   var length = getPrecision(loc.lat);
-  var noiseFactor = length >= 6 ? 4 : length - 2; // eslint-disable-next-line
-
+  var noiseFactor = length >= 6 ? 4 : length - 2;
+  // eslint-disable-next-line
   var suffix = 1 / Math.pow(10, noiseFactor) * count;
-
   var location = _extends({}, loc, {
     lat: parseFloat((loc.lat + suffix).toFixed(length))
   });
-
   return location;
 }
-
 function getLocationObject(location) {
   var resultType = Array.isArray(location) ? 'array' : typeof location;
-
   switch (resultType) {
     case 'string':
       {
@@ -83,14 +77,12 @@ function getLocationObject(location) {
             lng: parseFloat(locationSplit[1])
           };
         }
-
         var locationDecode = geohash.decode(location);
         return {
           lat: locationDecode.latitude,
           lng: locationDecode.longitude
         };
       }
-
     case 'array':
       {
         return {
@@ -98,14 +90,12 @@ function getLocationObject(location) {
           lng: location[0]
         };
       }
-
     default:
       {
         return location;
       }
   }
 }
-
 var ReactiveMap = {
   name: 'ReactiveMap',
   props: {
@@ -146,11 +136,9 @@ var ReactiveMap = {
   data: function data() {
     var props = this.$props;
     var currentPageState = 0;
-
     if (props.currentPage) {
       currentPageState = Math.max(props.currentPage - 1, 0);
     }
-
     this.__state = {
       from: currentPageState * props.size,
       zoom: props.defaultZoom,
@@ -167,8 +155,7 @@ var ReactiveMap = {
     },
     stats: function stats() {
       var _this$getAllData = this.getAllData(),
-          resultsToRender = _this$getAllData.resultsToRender;
-
+        resultsToRender = _this$getAllData.resultsToRender;
       return _extends({}, getResultStats(this), {
         currentPage: this.currentPageState,
         displayedResults: resultsToRender.length
@@ -192,26 +179,21 @@ var ReactiveMap = {
         var options = getQueryOptions(this.$props);
         options.from = 0;
         this.$defaultQuery = newVal(null, this.$props);
-
         var _ref = this.$defaultQuery || {},
-            sort = _ref.sort,
-            query = _ref.query;
-
+          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
-
-
+        }
+        // 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
-
+        var forceExecute = true;
+        // Update default query to include the geo bounding box query
         this.setDefaultQueryForRSAPI();
         var meta = {
           mapBoxBounds: this.mapBoxBounds
@@ -238,7 +220,6 @@ var ReactiveMap = {
     },
     hits: function hits(newVal, oldVal) {
       this.$emit('data', this.getData());
-
       if (this.pagination) {
         // called when page is changed
         if (this.isLoading && (oldVal || newVal)) {
@@ -248,54 +229,46 @@ var ReactiveMap = {
     },
     rawData: function rawData(newVal, oldVal) {
       var _this = this;
-
       if (!isEqual(newVal, oldVal)) {
         var promotedResults = this.promotedResults,
-            hits = this.hits;
+          hits = this.hits;
         var results = parseHits(hits) || [];
         var parsedPromotedResults = parseHits(promotedResults) || [];
         var filteredResults = results;
-
         if (parsedPromotedResults.length) {
           var ids = parsedPromotedResults.map(function (item) {
             return item._id;
           }).filter(Boolean);
-
           if (ids) {
             filteredResults = filteredResults.filter(function (item) {
               return !ids.includes(item._id);
             });
           }
-
           filteredResults = [].concat(parsedPromotedResults, filteredResults);
         }
-
         filteredResults = filteredResults.filter(function (item) {
           return !!item[_this.dataField];
         }).map(function (item) {
           var _extends2;
-
           return _extends({}, item, (_extends2 = {}, _extends2[_this.dataField] = getLocationObject(item[_this.dataField]), _extends2));
         });
         this.filteredResults = this.addNoise(filteredResults);
-
         if (this.calculateMarkers) {
           this.markersData = this.calculateMarkers({
             data: this.filteredResults,
             rawData: this.rawData
           }) || [];
         }
-
         this.$emit('data', this.getData());
       }
     },
     center: function center(newVal, oldVal) {
       if (!isEqual(newVal, oldVal)) {
-        var persistMapQuery = !!this.center; // we need to forceExecute the query because the center has changed
-
+        var persistMapQuery = !!this.center;
+        // we need to forceExecute the query because the center has changed
         var forceExecute = true;
-        var geoQuery = this.getGeoQuery(this.$props); // Update default query for RS API
-
+        var geoQuery = this.getGeoQuery(this.$props);
+        // Update default query for RS API
         this.setDefaultQueryForRSAPI();
         var meta = {
           mapBoxBounds: this.mapBoxBounds
@@ -312,7 +285,6 @@ var ReactiveMap = {
           lng: Number(location[1])
         };
       }
-
       return {
         lat: location ? Number(location.lat) : this.defaultCenter.lat,
         lng: location ? Number(location.lon === undefined ? location.lng : location.lon) : this.defaultCenter.lng
@@ -324,14 +296,11 @@ var ReactiveMap = {
     },
     addNoise: function addNoise(hits) {
       var _this2 = this;
-
       var hitMap = {};
       var updatedHits = [];
       hits.forEach(function (item) {
         var updatedItem = _extends({}, item);
-
         var location = _this2.parseLocation(item[_this2.dataField]);
-
         var key = JSON.stringify(location);
         var count = hitMap[key] || 0;
         updatedItem[_this2.dataField] = count ? withDistinctLat(location, count) : location;
@@ -344,16 +313,13 @@ var ReactiveMap = {
       if (result) {
         return this.parseLocation(result[this.dataField]);
       }
-
       return null;
     },
     getHitsCenter: function getHitsCenter(hits) {
       var _this3 = this;
-
       var data = hits.map(function (hit) {
         return hit[_this3.dataField];
       });
-
       if (data.length) {
         var numCoords = data.length;
         var X = 0.0;
@@ -377,8 +343,8 @@ var ReactiveMap = {
         X /= numCoords;
         Y /= numCoords;
         Z /= numCoords;
-        var lng = Math.atan2(Y, X); // eslint-disable-next-line
-
+        var lng = Math.atan2(Y, X);
+        // eslint-disable-next-line
         var hyp = Math.sqrt(X * X + Y * Y);
         var lat = Math.atan2(Z, hyp);
         var newX = lat * 180 / Math.PI;
@@ -388,18 +354,14 @@ var ReactiveMap = {
           lng: newY
         };
       }
-
       return false;
     },
     getCenter: function getCenter(hits) {
       var _this4 = this;
-
       if (this.center) {
         return this.parseLocation(this.center);
       }
-
       var mapRef = this.getMapRef();
-
       if (mapRef && typeof mapRef.getCenter === 'function' && this.$options.preserveCenter) {
         var currentCenter = mapRef.getCenter();
         setTimeout(function () {
@@ -410,21 +372,17 @@ var ReactiveMap = {
           lng: currentCenter.lng()
         });
       }
-
       if (hits && hits.length) {
         if (this.autoCenter) {
           return this.getHitsCenter(hits) || this.getDefaultCenter();
         }
-
         return hits[0] && hits[0][this.dataField] ? this.getPosition(hits[0]) : this.getDefaultCenter();
       }
-
       return this.getDefaultCenter();
     },
     handleZoomChange: function handleZoomChange(zoom) {
       if (zoom) {
         var prevZoom = this.zoom;
-
         if (this.searchAsMove) {
           this.zoom = zoom;
           this.$options.preserveCenter = true;
@@ -432,7 +390,6 @@ var ReactiveMap = {
         } else {
           this.zoom = zoom;
         }
-
         if (prevZoom !== zoom) {
           this.$emit('zoom-changed', zoom);
         }
@@ -443,7 +400,6 @@ var ReactiveMap = {
         this.$options.preserveCenter = true;
         this.setGeoQuery(true);
       }
-
       this.$emit('drag-end');
     },
     handlePreserveCenter: function handlePreserveCenter(preserveCenter) {
@@ -457,14 +413,12 @@ var ReactiveMap = {
         var executeUpdate = !!this.center;
         this.setGeoQuery(executeUpdate);
       }
-
       this.$emit('idle');
     },
     setGeoQuery: function setGeoQuery(executeUpdate) {
       if (executeUpdate === void 0) {
         executeUpdate = false;
       }
-
       // execute a new query on the initial mount
       // or whenever searchAsMove is true and the map is dragged
       if (executeUpdate || !this.skipBoundingBox && !this.mapBoxBounds) {
@@ -476,18 +430,16 @@ var ReactiveMap = {
         };
         this.setMapData(this.componentId, this.$defaultQuery, persistMapQuery, forceExecute, meta);
       }
-
       this.skipBoundingBox = false;
     },
     getMapParams: function getMapParams() {
       var _this$getData = this.getData(),
-          data = _this$getData.data;
-
+        data = _this$getData.data;
       var showMarkers = this.showMarkers,
-          defaultPin = this.defaultPin,
-          renderPopover = this.renderPopover,
-          autoClosePopover = this.autoClosePopover,
-          renderItem = this.renderItem;
+        defaultPin = this.defaultPin,
+        renderPopover = this.renderPopover,
+        autoClosePopover = this.autoClosePopover,
+        renderItem = this.renderItem;
       return {
         resultsToRender: data,
         center: this.getCenter(data),
@@ -508,19 +460,17 @@ var ReactiveMap = {
     },
     getAllData: function getAllData() {
       var size = this.size,
-          promotedResults = this.promotedResults,
-          customData = this.customData,
-          currentPage = this.currentPage,
-          hits = this.hits;
+        promotedResults = this.promotedResults,
+        customData = this.customData,
+        currentPage = this.currentPage,
+        hits = this.hits;
       var results = parseHits(hits) || [];
       var parsedPromotedResults = parseHits(promotedResults) || [];
       var base = currentPage * size;
       var resultsToRender = this.filteredResults || [];
-
       if (this.markersData) {
         resultsToRender = this.markersData;
       }
-
       return {
         results: results,
         resultsToRender: resultsToRender,
@@ -533,11 +483,10 @@ var ReactiveMap = {
     },
     getData: function getData() {
       var _this$getAllData2 = this.getAllData(),
-          promotedResults = _this$getAllData2.promotedResults,
-          aggregationData = _this$getAllData2.aggregationData,
-          customData = _this$getAllData2.customData,
-          resultsToRender = _this$getAllData2.resultsToRender;
-
+        promotedResults = _this$getAllData2.promotedResults,
+        aggregationData = _this$getAllData2.aggregationData,
+        customData = _this$getAllData2.customData,
+        resultsToRender = _this$getAllData2.resultsToRender;
       return {
         data: this.withClickIds(resultsToRender),
         aggregationData: this.withClickIds(aggregationData || []),
@@ -549,8 +498,7 @@ var ReactiveMap = {
     },
     getComponent: function getComponent$1() {
       var error = this.error,
-          isLoading = this.isLoading;
-
+        isLoading = this.isLoading;
       var data = _extends({
         error: error,
         loading: isLoading,
@@ -558,7 +506,6 @@ var ReactiveMap = {
         triggerClickAnalytics: this.triggerClickAnalytics,
         setPage: this.setPage
       }, this.getData());
-
       return getComponent(data, this);
     },
     setPage: function setPage(page) {
@@ -574,7 +521,6 @@ var ReactiveMap = {
         this.loadMoreAction(this.componentId, _extends({}, options, {
           from: value
         }), false);
-
         if (this.URLParams) {
           this.setPageURL(this.componentId, page + 1, this.componentId, false, true);
         }
@@ -596,7 +542,6 @@ var ReactiveMap = {
       if (props === void 0) {
         props = this.$props;
       }
-
       this.$defaultQuery = props.defaultQuery ? props.defaultQuery() : null;
       var mapRef = this.getMapRef();
       var mapBounds = mapRef && typeof mapRef.getBounds === 'function' ? mapRef.getBounds() : false;
@@ -604,10 +549,8 @@ var ReactiveMap = {
       var south;
       var east;
       var west;
-
       if (mapBounds) {
         var _geo_bounding_box;
-
         north = mapBounds.getNorthEast().lat();
         south = mapBounds.getSouthWest().lat();
         east = mapBounds.getNorthEast().lng();
@@ -620,31 +563,28 @@ var ReactiveMap = {
         var geoQuery = {
           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
+
             return {
               must: [geoQuery, query]
             };
           }
         }
-
         return geoQuery;
-      } // return the defaultQuery (if set) or null when map query not available
-
+      }
 
+      // return the defaultQuery (if set) or null when map query not available
       return this.$defaultQuery ? this.$defaultQuery.query : null;
     },
     getGeoDistanceQuery: function getGeoDistanceQuery() {
       var center = this.center || this.defaultCenter;
-
       if (center && this.defaultRadius) {
         var _geo_distance;
-
         // skips geo bounding box query on initial load
         this.skipBoundingBox = true;
         return {
@@ -653,7 +593,6 @@ var ReactiveMap = {
           }, _geo_distance[this.dataField] = this.getArrPosition(center), _geo_distance)
         };
       }
-
       return null;
     },
     loadMore: function loadMore() {
@@ -668,26 +607,21 @@ var ReactiveMap = {
     },
     triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
       var docId = documentId;
-
       if (!docId) {
         var _this$getData2 = this.getData(),
-            data = _this$getData2.data;
-
+          data = _this$getData2.data;
         var hitData = data.find(function (hit) {
           return hit._click_id === searchPosition;
         });
-
         if (hitData && hitData._id) {
           docId = hitData._id;
         }
       }
-
       this.recordResultClick(searchPosition, docId);
     },
     withClickIds: function withClickIds(results) {
       var _this$getAllData3 = this.getAllData(),
-          base = _this$getAllData3.base;
-
+        base = _this$getAllData3.base;
       return results.map(function (result, index) {
         return _extends({}, result, {
           _click_id: base + index
@@ -699,19 +633,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 isFunction(renderError) ? renderError(this.error) : renderError;
       }
-
       return null;
     },
     renderSearchAsMove: function renderSearchAsMove() {
-      var h = this.$createElement;
-
       if (this.showSearchAsMove) {
-        return h("div", {
+        return createVNode("div", {
           "style": {
             position: 'absolute',
             bottom: '30px',
@@ -723,41 +653,29 @@ var ReactiveMap = {
             borderRadius: 2,
             zIndex: 10000
           },
-          "attrs": {
-            "className": getClassName(this.innerClass, 'checkboxContainer') || null
-          }
-        }, [h(Checkbox, {
-          "attrs": {
-            "type": "checkbox",
-            "id": this.$props.componentId + "-searchasmove",
-            "checked": this.searchAsMove,
-            "show": true
-          },
+          "className": getClassName(this.innerClass, 'checkboxContainer') || null
+        }, [createVNode(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), 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, {
-        "attrs": {
-          "pages": this.pages,
-          "totalPages": this.totalPages,
-          "currentPage": this.currentPageState,
-          "setPage": this.setPage,
-          "innerClass": this.innerClass
-        }
-      });
+      return createVNode(Pagination, {
+        "pages": this.pages,
+        "totalPages": this.totalPages,
+        "currentPage": this.currentPageState,
+        "setPage": this.setPage,
+        "innerClass": this.innerClass
+      }, null);
     }
   },
   created: function created() {
@@ -765,7 +683,6 @@ var ReactiveMap = {
       this.currentPageState = this.defaultPage;
       this.from = this.currentPageState * this.$props.size;
     }
-
     this.internalComponent = this.$props.componentId + "__internal";
     this.updateComponentProps(this.componentId, {
       from: this.from
@@ -780,35 +697,31 @@ var ReactiveMap = {
         this.setPageURL(this.$props.componentId, this.currentPage, this.$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] = {
+      var _ref3;
+      options.sort = [(_ref3 = {}, _ref3[this.$props.dataField] = {
         order: this.$props.sortBy
-      }, _ref2)];
+      }, _ref3)];
     }
-
     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
+      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;
-      } // since we want defaultQuery to be executed anytime
+      }
+      // 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
+      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 forceExecute = false; // Update default query for RS API
-
+      // Update default query for RS API
       this.setDefaultQueryForRSAPI();
       var meta = {
         mapBoxBounds: this.mapBoxBounds
@@ -817,20 +730,19 @@ var ReactiveMap = {
     } 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; // - forceExecute will make sure that the component query + Map query gets executed
+        var _persistMapQuery = !!this.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 _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 = {
@@ -840,19 +752,16 @@ var ReactiveMap = {
         this.setMapData(this.componentId, query, _persistMapQuery, _forceExecute, _meta);
       }
     }
-
     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 createVNode("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]);
   }
 };
-
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     defaultPage: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value - 1 || -1,
@@ -867,7 +776,6 @@ var mapStateToProps = function mapStateToProps(state, props) {
     hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden
   };
 };
-
 var mapDispatchToProps = {
   loadMoreAction: loadMore,
   setPageURL: setValue,
@@ -879,16 +787,14 @@ var mapDispatchToProps = {
   recordResultClick: recordResultClick,
   setMapData: setMapData
 };
-var RMConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(ReactiveMap), {
+var RMConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(ReactiveMap), {
   componentType: componentTypes.reactiveMap,
   internalComponent: true
-});
-
+}));
 ReactiveMap.install = function (Vue) {
   Vue.component(ReactiveMap.name, RMConnected);
-}; // Add componentType for SSR
-
-
+};
+// Add componentType for SSR
 ReactiveMap.componentType = componentTypes.reactiveMap;
 
 var infoWindowMappedProps = {
@@ -920,26 +826,26 @@ var infoWindowMappedProps = {
  * @param  {string[]} events an array of string with all events that you want to bind
  * @returns {void}
  */
-
 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);
       });
     }
   });
 }
+
 /**
  * Function that helps you to capitalize the first letter on a word
  *
  * @param  {string} text the text that you want to capitalize
  * @returns {string}
  */
-
 function capitalizeFirstLetter(text) {
   return text.charAt(0).toUpperCase() + text.slice(1);
 }
+
 /**
  * Function that helps you to get all non nullable props from a component
  *
@@ -947,16 +853,15 @@ function capitalizeFirstLetter(text) {
  * @param  {Object} props the props object
  * @returns {Object}
  */
-
 function getPropsValues(vueInst, props) {
   return Object.keys(props).reduce(function (acc, prop) {
     if (vueInst[prop] !== undefined) {
       acc[prop] = vueInst[prop];
     }
-
     return acc;
   }, {});
 }
+
 /**
  * Watch the individual properties of a PoD object, instead of the object
  * per se. This is different from a deep watch where both the reference
@@ -970,19 +875,17 @@ function getPropsValues(vueInst, props) {
  * @param  {boolean} immediate=false
  * @returns {void}
  */
-
 function watchPrimitiveProperties(vueInst, propertiesToTrack, handler, immediate) {
   if (immediate === void 0) {
     immediate = false;
   }
-
   var isHandled = false;
+
   /**
    * Function in charge to execute the handler function if it was not fired
    *
    * @returns void
    */
-
   function requestHandle() {
     if (!isHandled) {
       isHandled = true;
@@ -992,13 +895,13 @@ function watchPrimitiveProperties(vueInst, propertiesToTrack, handler, immediate
       });
     }
   }
-
   propertiesToTrack.forEach(function (prop) {
     vueInst.$watch(prop, requestHandle, {
       immediate: immediate
     });
   });
 }
+
 /**
  * Binds the properties defined in props to the google maps instance.
  * If the prop is an Object type, and we wish to track the properties
@@ -1011,30 +914,27 @@ function watchPrimitiveProperties(vueInst, propertiesToTrack, handler, immediate
  * @param  {Object} props object with the component props tha should be synched with the Google Maps instances props
  * @returns {void}
  */
-
 function bindProps(vueInst, googleMapsInst, props) {
   Object.keys(props).forEach(function (attribute) {
     var _props$attribute = props[attribute],
-        twoWay = _props$attribute.twoWay,
-        type = _props$attribute.type,
-        trackProperties = _props$attribute.trackProperties,
-        noBind = _props$attribute.noBind;
-
+      twoWay = _props$attribute.twoWay,
+      type = _props$attribute.type,
+      trackProperties = _props$attribute.trackProperties,
+      noBind = _props$attribute.noBind;
     if (!noBind) {
       var setMethodName = "set" + capitalizeFirstLetter(attribute);
       var getMethodName = "get" + capitalizeFirstLetter(attribute);
       var eventName = attribute.toLowerCase() + "_changed";
       var initialValue = vueInst[attribute];
-
       if (typeof googleMapsInst[setMethodName] === 'undefined') {
         throw new Error( // TODO: Analyze all disabled rules in the file
         // eslint-disable-next-line no-underscore-dangle -- old code should be analyzed
         setMethodName + " is not a method of (the Maps object corresponding to) " + vueInst.$options._componentTag);
-      } // We need to avoid an endless
+      }
+
+      // We need to avoid an endless
       // propChanged -> event emitted -> propChanged -> event emitted loop
       // although this may really be the user's responsibility
-
-
       if (type !== Object || !trackProperties) {
         // Track the object deeply
         vueInst.$watch(attribute, function () {
@@ -1051,8 +951,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]());
         });
@@ -1072,47 +971,39 @@ var InfoWindowClusterManager = {
   },
   provide: function provide() {
     var _this = this;
-
-    var events = ['domready', 'closeclick', 'content_changed']; // Infowindow needs this to be immediately available
-
+    var events = ['domready', 'closeclick', 'content_changed'];
+    // Infowindow needs this to be immediately available
     var promise = this.$mapPromise.then(function (map) {
-      _this.$map = map; // Initialize the maps with the given options
-
+      _this.$map = map;
+      // Initialize the maps with the given options
       var initialOptions = _extends({}, _this.options, {
         map: map
       }, getPropsValues(_this, infoWindowMappedProps));
-
       var extraOptions = initialOptions.options,
-          position = initialOptions.position,
-          finalOptions = _objectWithoutPropertiesLoose(initialOptions, _excluded);
-
+        position = initialOptions.position,
+        finalOptions = _objectWithoutPropertiesLoose(initialOptions, _excluded);
       finalOptions.content = _this.$refs.flyaway;
-
       if (_this.$markerPromise) {
         _this.$markerPromise.then(function (markerObject) {
-          _this.$markerObject = markerObject; // eslint-disable-next-line
-
+          _this.$markerObject = markerObject;
+          // eslint-disable-next-line
           _this.$infoWindowObject = new google.maps.InfoWindow(finalOptions);
           bindProps(_this, _this.$infoWindowObject, infoWindowMappedProps);
-          bindEvents(_this, _this.$infoWindowObject, events); // TODO: This function names should be analyzed
-
+          bindEvents(_this, _this.$infoWindowObject, events);
+          // TODO: This function names should be analyzed
           /* eslint-disable no-underscore-dangle -- old style */
-
           _this._openInfoWindow();
-
           _this.$watch('opened', function () {
             _this._openInfoWindow();
           });
           /* eslint-enable no-underscore-dangle */
-
-
           return _this.$infoWindowObject;
         });
       }
     })["catch"](function (error) {
       throw error;
-    }); // TODO: analyze the efects of only returns the instance and remove completely the promise
-
+    });
+    // TODO: analyze the efects of only returns the instance and remove completely the promise
     this.$infoWindowPromise = promise;
     return {
       $infoWindowPromise: promise
@@ -1129,7 +1020,6 @@ var InfoWindowClusterManager = {
       type: [String, Object],
       "default": undefined
     },
-
     /**
      * Determines if the info-window is open or not
      */
@@ -1137,7 +1027,6 @@ var InfoWindowClusterManager = {
       type: Boolean,
       "default": true
     },
-
     /**
      * Contains the LatLng at which this info window is anchored.
      * Note: An InfoWindow may be attached either to a Marker object
@@ -1153,7 +1042,6 @@ var InfoWindowClusterManager = {
       type: Object,
       "default": undefined
     },
-
     /**
      * All InfoWindows are displayed on the map in order of their zIndex, with higher values displaying in front of InfoWindows with lower values. By default, InfoWindows are displayed according to their latitude, with InfoWindows of lower latitudes appearing in front of InfoWindows at higher latitudes. InfoWindows are always displayed in front of markers.
      * @value 0
@@ -1163,7 +1051,6 @@ var InfoWindowClusterManager = {
       type: Number,
       "default": 0
     },
-
     /**
      * Extra options that you want to pass to the component
      */
@@ -1199,10 +1086,9 @@ var InfoWindowClusterManager = {
     }
   },
   render: function render() {
-    var h = arguments[0];
-    return h("div", [h("div", {
+    return createVNode("div", null, [createVNode("div", {
       "ref": "flyaway"
-    }, [this.$scopedSlots["default"]()])]);
+    }, [this.$slots["default"]()])]);
   }
 };
 
@@ -1234,14 +1120,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": _extends({}, this.infoWindowProps),
-      "on": _extends({}, events)
-    }, [h("div", [renderPopover(this.handleClose)])]);
+      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)])];
+      }
+    });
   }
 };
 
@@ -1295,14 +1186,12 @@ var ClusterMarkers = {
     },
     closeMarker: function closeMarker(marker) {
       var _this$$props = this.$props,
-          autoClosePopover = _this$$props.autoClosePopover,
-          handlePreserveCenter = _this$$props.handlePreserveCenter;
+        autoClosePopover = _this$$props.autoClosePopover,
+        handlePreserveCenter = _this$$props.handlePreserveCenter;
       var id = marker.metaData && marker.metaData._id;
-
       var _this$openMarkers = this.openMarkers,
-          del = _this$openMarkers[id],
-          activeMarkers = _objectWithoutPropertiesLoose(_this$openMarkers, [id].map(_toPropertyKey));
-
+        del = _this$openMarkers[id],
+        activeMarkers = _objectWithoutPropertiesLoose(_this$openMarkers, [id].map(_toPropertyKey));
       var newOpenMarkers = autoClosePopover ? {} : activeMarkers;
       this.setOpenMarkers(newOpenMarkers);
       handlePreserveCenter(true);
@@ -1310,15 +1199,14 @@ var ClusterMarkers = {
     },
     openMarker: function openMarker(marker, index) {
       var _ref, _extends2;
-
       var autoClosePopover = this.autoClosePopover,
-          handlePreserveCenter = this.handlePreserveCenter;
+        handlePreserveCenter = this.handlePreserveCenter;
       var id = marker.metaData && marker.metaData._id;
       var newOpenMarkers = autoClosePopover ? (_ref = {}, _ref[id] = marker, _ref) : _extends({}, this.openMarkers, (_extends2 = {}, _extends2[id] = marker, _extends2));
       this.setOpenMarkers(newOpenMarkers);
       handlePreserveCenter(true);
       this.triggerAnalytics(id, index);
-      this.$emit('open-marker-popover', marker.metaData);
+      this.$emit('open-marker-popover', marker);
     },
     removeMarkers: function removeMarkers() {
       if (this.$clusterObject) {
@@ -1329,23 +1217,22 @@ var ClusterMarkers = {
     },
     buildMarkers: function buildMarkers(markersToRender) {
       var _this = this;
-
       this.$mapPromise.then(function (map) {
         if (_this.$clusterPromise) {
           _this.$clusterPromise.then(function (clusterObject) {
             // Detect changed markers
             var markersToAdd = [];
-            var markersToRemove = []; // A map of marker id to active status, `true` means marker is active
+            var markersToRemove = [];
+            // A map of marker id to active status, `true` means marker is active
             // `false` means marker is stale and should be removed
-
             var oldMarkersIdMap = {};
             (_this.$markers || []).forEach(function (marker) {
               if (marker.metaData && marker.metaData._id) {
                 // mark all old markers as stale
                 oldMarkersIdMap[marker.metaData._id] = false;
               }
-            }); // build map markers
-
+            });
+            // build map markers
             markersToRender.forEach(function (marker, index) {
               // Avoid if a marker is already rendered
               if (marker._id && oldMarkersIdMap[marker._id] !== undefined) {
@@ -1358,14 +1245,11 @@ var ClusterMarkers = {
                   map: map,
                   position: _this.getPosition(marker)
                 });
-
                 if (_this.renderItem) {
                   var data = _this.renderItem(marker);
-
                   if ('label' in data) {
                     initialOptions.label = data.label;
                   }
-
                   if ('icon' in data) {
                     initialOptions.icon = data.icon;
                   }
@@ -1374,23 +1258,20 @@ var ClusterMarkers = {
                     url: _this.defaultPin
                   };
                 }
-
                 var extraOptions = initialOptions.options,
-                    finalOptions = _objectWithoutPropertiesLoose(initialOptions, _excluded$1);
-
+                  finalOptions = _objectWithoutPropertiesLoose(initialOptions, _excluded$1);
                 if (_this.$clusterPromise) {
                   finalOptions.map = null;
-                } // eslint-disable-next-line
-
-
+                }
+                // eslint-disable-next-line
                 var markerObject = new google.maps.Marker(finalOptions);
                 markerObject.addListener('click', function () {
                   _this.openMarker(markerObject, index);
                 });
                 markersToAdd.push(markerObject);
               }
-            }); // Current active markers
-
+            });
+            // Current active markers
             var currentMarkers = [];
             markersToAdd.forEach(function (marker) {
               currentMarkers.push(marker);
@@ -1404,10 +1285,10 @@ var ClusterMarkers = {
                   currentMarkers.push(marker);
                 }
               }
-            }); // Remove old markers
-
-            clusterObject.removeMarkers(markersToRemove); // Add inital markers at once
-
+            });
+            // Remove old markers
+            clusterObject.removeMarkers(markersToRemove);
+            // Add inital markers at once
             clusterObject.addMarkers(markersToAdd);
             _this.$clusterObject = clusterObject;
             _this.$map = map;
@@ -1421,41 +1302,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 createVNode("div", null, [Object.keys(this.openMarkers).map(function (markerId) {
       var marker = _this2.openMarkers[markerId];
       var item = marker.metaData;
-      return h(InfoWindowWrapper, {
+      return 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);
     })]);
   }
 };
@@ -1466,7 +1340,6 @@ var ClusterManager = connect(function () {
   return null;
 }, mapDispatchToProps$1)(ClusterMarkers);
 
-var InfoWindow = components.InfoWindow;
 var InfoWindowWrapper$1 = {
   name: 'InfoWindowWrapper',
   props: {
@@ -1489,19 +1362,21 @@ 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": _extends({}, this.infoWindowProps),
-      "on": _extends({}, events)
-    }, [h("div", [renderPopover(this.handleClose)])]);
+      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)])];
+      }
+    });
   }
 };
 
-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
-
+// 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',
   props: {
@@ -1562,14 +1437,12 @@ var MarkerWithLabel = {
       if (this.marker instanceof window.google.maps.LatLng) {
         return this.marker;
       }
-
       return new window.google.maps.LatLng(this.lat, this.lng);
     }
   },
   watch: {
     marker: function marker() {
       var _this = this;
-
       this.$mapPromise.then(function () {
         return _this.$overlay.setPosition();
       });
@@ -1585,7 +1458,6 @@ var MarkerWithLabel = {
       // eslint-disable-next-line
       options.map = null;
     }
-
     return this.$clusterPromise;
   },
   destroyed: function destroyed() {
@@ -1598,111 +1470,87 @@ var MarkerWithLabel = {
   },
   provide: function provide() {
     var _this2 = this;
-
     var self = this;
     return this.$mapPromise.then(function (map) {
       var Overlay = /*#__PURE__*/function (_window$google$maps$O) {
         _inheritsLoose(Overlay, _window$google$maps$O);
-
         function Overlay(map2) {
           var _this3;
-
           _this3 = _window$google$maps$O.call(this) || this;
           _this3.metaData = self.metaData;
-
           _this3.setMap(map2);
-
           _this3.draw = function () {
             return _this3.repaint();
           };
-
           _this3.setPosition = function () {
             return _this3.repaint();
           };
-
           _this3.getVisible = function () {
             return true;
           };
-
           return _this3;
         }
-
         var _proto = Overlay.prototype;
-
         _proto.repaint = function repaint() {
           var div = self.$el;
           var projection = this.getProjection();
-
           if (projection && div) {
             var posPixel = projection.fromLatLngToDivPixel(self.latLng);
             var x;
             var y;
-
             switch (self.alignment) {
               case 'top':
                 x = posPixel.x - div.offsetWidth / 2;
                 y = posPixel.y - div.offsetHeight;
                 break;
-
               case 'bottom':
                 x = posPixel.x - div.offsetWidth / 2;
                 y = posPixel.y;
                 break;
-
               case 'left':
                 x = posPixel.x - div.offsetWidth;
                 y = posPixel.y - div.offsetHeight / 2;
                 break;
-
               case 'right':
                 x = posPixel.x;
                 y = posPixel.y - div.offsetHeight / 2;
                 break;
-
               case 'center':
                 x = posPixel.x - div.offsetWidth / 2;
                 y = posPixel.y - div.offsetHeight / 2;
                 break;
-
               case 'topleft':
               case 'lefttop':
                 x = posPixel.x - div.offsetWidth;
                 y = posPixel.y - div.offsetHeight;
                 break;
-
               case 'topright':
               case 'righttop':
                 x = posPixel.x;
                 y = posPixel.y - div.offsetHeight;
                 break;
-
               case 'bottomleft':
               case 'leftop':
                 x = posPixel.x - div.offsetWidth;
                 y = posPixel.y;
                 break;
-
               case 'bottomright':
               case 'rightbottom':
                 x = posPixel.x;
                 y = posPixel.y;
                 break;
-
               default:
                 throw new Error('Invalid alignment type of custom marker!');
             }
-
             if (self.cssPosition) {
               div.style.transform = "translate(" + (x + self.offsetX) + "px, " + (y + self.offsetY) + "px)";
             } else {
               div.style.left = x + self.offsetX + "px";
               div.style.top = y + self.offsetY + "px";
             }
-
             div.style['z-index'] = self.zIndex;
           }
         };
-
         _proto.onAdd = function onAdd() {
           if (this.$clusterObject) {
             this.$clusterObject.removeMarker(this.$overlay, true);
@@ -1710,7 +1558,6 @@ var MarkerWithLabel = {
             this.$overlay.setMap(null);
             this.$overlay = undefined;
           }
-
           var div = self.$el;
           var panes = this.getPanes();
           div.style.position = 'absolute';
@@ -1718,24 +1565,21 @@ var MarkerWithLabel = {
           div.style.zIndex = self.zIndex;
           panes.overlayLayer.appendChild(div);
           panes.overlayMouseTarget.appendChild(div);
-
           this.getDraggable = function () {
             return false;
           };
-
           this.getPosition = function () {
             return new window.google.maps.LatLng(self.lat, self.lng);
           };
-
           self.afterCreate(this);
-        } // eslint-disable-next-line
+        }
+        // eslint-disable-next-line
         ;
-
         _proto.onRemove = function onRemove() {
           if (self.$el) {
             var ua = window.navigator.userAgent;
-            var msie = ua.indexOf('MSIE '); // eslint-disable-next-line
-
+            var msie = ua.indexOf('MSIE ');
+            // eslint-disable-next-line
             if (msie > 0 || !!ua.match(/Trident.*rv\:11\./)) {
               self.$el.parentNode.removeChild(self.$el);
             } else {
@@ -1743,15 +1587,12 @@ var MarkerWithLabel = {
             }
           }
         };
-
         return Overlay;
       }(window.google.maps.OverlayView);
-
       _this2.$overlay = new Overlay(map);
       setTimeout(function () {
         if (_this2.$overlay) {
           _this2.$overlay.repaint();
-
           _this2.opacity = 1;
         }
       }, 100);
@@ -1760,7 +1601,6 @@ var MarkerWithLabel = {
   methods: {
     afterCreate: function afterCreate(inst) {
       var _this4 = this;
-
       if (this.$clusterPromise && !this.isMarkerAdded) {
         this.$clusterPromise.then(function (co) {
           co.addMarker(inst);
@@ -1771,16 +1611,13 @@ var MarkerWithLabel = {
     }
   },
   render: function render() {
-    var h = arguments[0];
-    return h("div", {
+    return 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()]);
   }
 };
@@ -1790,7 +1627,6 @@ var MapPin = styled('div')(_templateObject || (_templateObject = _taggedTemplate
 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 = 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',
@@ -1814,211 +1650,180 @@ var GoogleMapMarker = {
     };
   },
   methods: {
+    setIcon: function setIcon(icon) {
+      this.markerIcon = icon;
+    },
     increaseMarkerZIndex: function increaseMarkerZIndex() {
       var handlePreserveCenter = this.$props.handlePreserveCenter;
-
       if (this.highlightMarkerOnHover) {
         this.zIndex += 1;
       }
-
       handlePreserveCenter(true);
     },
     removeMarkerZIndex: function removeMarkerZIndex() {
       var handlePreserveCenter = this.$props.handlePreserveCenter;
-
       if (this.highlightMarkerOnHover) {
         this.zIndex -= 1;
       }
-
       handlePreserveCenter(true);
     },
     openMarker: function openMarker() {
       var _ref, _extends2;
-
       var _this$$props = this.$props,
-          handleOpenMarkers = _this$$props.setOpenMarkers,
-          openMarkers = _this$$props.openMarkers,
-          marker = _this$$props.marker,
-          autoClosePopover = _this$$props.autoClosePopover,
-          handlePreserveCenter = _this$$props.handlePreserveCenter;
+        handleOpenMarkers = _this$$props.setOpenMarkers,
+        openMarkers = _this$$props.openMarkers,
+        marker = _this$$props.marker,
+        autoClosePopover = _this$$props.autoClosePopover,
+        handlePreserveCenter = _this$$props.handlePreserveCenter;
       var id = marker._id;
       var newOpenMarkers = autoClosePopover ? (_ref = {}, _ref[id] = true, _ref) : _extends({}, openMarkers, (_extends2 = {}, _extends2[id] = true, _extends2));
       handleOpenMarkers(newOpenMarkers);
       handlePreserveCenter(true);
       this.triggerAnalytics();
+      marker.setIcon = this.setIcon;
       this.$emit('open-marker-popover', marker);
     },
     closeMarker: function closeMarker() {
       var _this$$props2 = this.$props,
-          handleOpenMarkers = _this$$props2.setOpenMarkers,
-          marker = _this$$props2.marker,
-          autoClosePopover = _this$$props2.autoClosePopover,
-          handlePreserveCenter = _this$$props2.handlePreserveCenter,
-          openMarkers = _this$$props2.openMarkers;
+        handleOpenMarkers = _this$$props2.setOpenMarkers,
+        marker = _this$$props2.marker,
+        autoClosePopover = _this$$props2.autoClosePopover,
+        handlePreserveCenter = _this$$props2.handlePreserveCenter,
+        openMarkers = _this$$props2.openMarkers;
       var id = marker._id;
-
       var del = openMarkers[id],
-          activeMarkers = _objectWithoutPropertiesLoose(openMarkers, [id].map(_toPropertyKey));
-
+        activeMarkers = _objectWithoutPropertiesLoose(openMarkers, [id].map(_toPropertyKey));
       var newOpenMarkers = autoClosePopover ? {} : activeMarkers;
       handleOpenMarkers(newOpenMarkers);
       handlePreserveCenter(true);
+      marker.setIcon = this.setIcon;
       this.$emit('close-marker-popover', marker);
     },
     triggerAnalytics: function triggerAnalytics() {
       this.recordResultClick(this.index, this.marker._id);
     },
-    renderPopoverClick: function renderPopoverClick(item, includeExternalSettings) {
+    renderPopoverClick: function renderPopoverClick(item) {
       var _this = this;
-
-      if (includeExternalSettings === void 0) {
-        includeExternalSettings = false;
-      }
-
-      var h = this.$createElement;
       var additionalProps = {};
       var _this$$props3 = this.$props,
-          getPosition = _this$$props3.getPosition,
-          _renderPopover = _this$$props3.renderPopover,
-          openMarkers = _this$$props3.openMarkers;
-
-      if (includeExternalSettings) {
-        // to render pop-over correctly with MarkerWithLabel
-        additionalProps = {
-          position: getPosition(item),
-          defaultOptions: {
-            pixelOffset: new window.google.maps.Size(0, -30)
-          }
-        };
-      }
-
+        getPosition = _this$$props3.getPosition,
+        _renderPopover = _this$$props3.renderPopover,
+        openMarkers = _this$$props3.openMarkers;
+      additionalProps = {
+        position: getPosition(item),
+        defaultOptions: {
+          pixelOffset: new window.google.maps.Size(0, -30)
+        }
+      };
       if (item._id in openMarkers) {
-        return h(InfoWindowWrapper$1, {
+        return 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,
-        defaultPin = _this$$props4.defaultPin,
-        renderPopover = _this$$props4.renderPopover,
-        customMarkerProps = _this$$props4.markerProps,
-        marker = _this$$props4.marker;
+      getPosition = _this$$props4.getPosition,
+      renderItem = _this$$props4.renderItem,
+      defaultPin = _this$$props4.defaultPin,
+      renderPopover = _this$$props4.renderPopover,
+      customMarkerProps = _this$$props4.markerProps,
+      marker = _this$$props4.marker;
     var markerProps = {};
-
     if (this.zIndex) {
       markerProps.zIndex = window.google.maps.Marker.MAX_ZINDEX + this.zIndex;
     }
-
     if (renderItem) {
-      marker.setIcon = function (icon) {
-        _this2.markerIcon = icon;
-      };
-
+      marker.setIcon = this.setIcon;
       var data = renderItem(marker);
-
       if ('label' in data) {
-        return h(MarkerWithLabel, {
+        return createVNode(MarkerWithLabel, 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": _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 createVNode("div", {
+              "css": mapPinWrapper
+            }, [createVNode(MapPin, null, {
+              "default": function _default() {
+                return [data.label];
+              }
+            }), createVNode(MapPinArrow, null, null), renderPopover ? _this2.renderPopoverClick(marker, true) : null]);
+          }
+        }), null);
       }
-
       if ('icon' in data) {
         markerProps.icon = data.icon;
       } else {
-        return h(MarkerWithLabel, {
+        return createVNode(MarkerWithLabel, 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": _extends({}, customMarkerProps)
-        });
+          "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);
       }
     } else if (defaultPin) {
       markerProps.icon = {
         url: defaultPin
       };
     }
-
-    return h(Marker, {
+    return createVNode(Marker, 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": _extends({}, customMarkerProps)
-    }, [renderPopover ? this.renderPopoverClick(marker) : null]);
+      "icon": this.markerIcon || markerProps.icon
+    }), {
+      "default": function _default() {
+        return [renderPopover ? _this2.renderPopoverClick(marker) : null];
+      }
+    });
   }
 };
 var mapDispatchToProps$2 = {
@@ -2028,7 +1833,6 @@ var GoogleMapMarker$1 = connect(function () {
   return null;
 }, mapDispatchToProps$2)(GoogleMapMarker);
 
-var Cluster = components.Cluster;
 var GoogleMapMarkers = {
   name: 'GoogleMapMarkers',
   props: {
@@ -2075,8 +1879,6 @@ var GoogleMapMarkers = {
   },
   render: function render() {
     var _this = this;
-
-    var h = arguments[0];
     var resultsToRender = this.$props.resultsToRender;
     var openMarkers = this.openMarkers;
     var markerProps = {
@@ -2093,75 +1895,65 @@ var GoogleMapMarkers = {
       showMarkerClusters: this.showMarkerClusters,
       highlightMarkerOnHover: this.highlightMarkerOnHover
     };
-
     if (this.showMarkerClusters) {
-      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);
-          }
+      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);
         },
         "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 [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
         },
-        "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
-          }
+        "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": _extends({}, markerProps),
-        "on": _extends({}, _this.$listeners)
-      });
+    return createVNode("div", null, [resultsToRender.map(function (marker, index) {
+      return createVNode(GoogleMapMarker$1, mergeProps({
+        "index": index,
+        "marker": marker
+      }, markerProps, _this.$attrs), null);
     })]);
   }
 };
 
-var Map = components.MapLayer;
+var _templateObject$1;
 var ReactiveGoogleMap = {
   name: 'ReactiveGoogleMap',
   props: {
@@ -2196,69 +1988,78 @@ 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;
+      Object.keys($attrs).forEach(function (property) {
+        if (onRE.test(property)) {
+          listeners[property] = $attrs[property];
+        }
+      });
+      return listeners;
+    }
+  },
   methods: {
     renderMap: function renderMap(_ref) {
       var _this = this;
-
       var resultsToRender = _ref.resultsToRender,
-          center = _ref.center,
-          zoom = _ref.zoom,
-          handleZoomChange = _ref.handleZoomChange,
-          handleOnDragEnd = _ref.handleOnDragEnd,
-          handleOnIdle = _ref.handleOnIdle,
-          renderSearchAsMove = _ref.renderSearchAsMove,
-          handlePreserveCenter = _ref.handlePreserveCenter,
-          getPosition = _ref.getPosition,
-          autoClosePopover = _ref.autoClosePopover,
-          defaultPin = _ref.defaultPin;
-      var h = this.$createElement;
+        center = _ref.center,
+        zoom = _ref.zoom,
+        handleZoomChange = _ref.handleZoomChange,
+        handleOnDragEnd = _ref.handleOnDragEnd,
+        handleOnIdle = _ref.handleOnIdle,
+        renderSearchAsMove = _ref.renderSearchAsMove,
+        handlePreserveCenter = _ref.handlePreserveCenter,
+        getPosition = _ref.getPosition,
+        autoClosePopover = _ref.autoClosePopover,
+        defaultPin = _ref.defaultPin;
       var style = {
         width: '100%',
         height: '100%',
         position: 'relative'
       };
-      return h("div", {
+      return createVNode("div", {
         "style": style
-      }, [h(Map, {
+      }, [createVNode(Map, mergeProps({
         "ref": "mapRef",
-        "attrs": {
-          "map-type-id": "terrain",
-          "options": {
-            zoomControl: true
-          },
-          "center": center,
-          "zoom": zoom
-        },
+        "map-type-id": "terrain",
         "style": {
           height: '100%'
         },
-        "props": _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": 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
         },
-        "on": _extends({}, this.$listeners)
-      }) : null]), renderSearchAsMove()]);
+        "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];
+        }
+      }), renderSearchAsMove()]);
     },
     getMapRef: function getMapRef() {
       return this.mapRef;
@@ -2266,11 +2067,11 @@ var ReactiveGoogleMap = {
     removeMarkers: function removeMarkers() {
       var clusterManagerInstance;
       var currentInstance = this;
-
       while (currentInstance) {
-        if (currentInstance && currentInstance._name === '<ConnectClusterMarkers>') {
+        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];
@@ -2278,7 +2079,6 @@ var ReactiveGoogleMap = {
           currentInstance = null;
         }
       }
-
       if (clusterManagerInstance && clusterManagerInstance.removeMarkers) {
         clusterManagerInstance.removeMarkers();
       }
@@ -2286,7 +2086,6 @@ var ReactiveGoogleMap = {
   },
   mounted: function mounted() {
     var _this2 = this;
-
     if (this.$refs.mapRef) {
       this.$refs.mapRef.$mapPromise.then(function (map) {
         _this2.mapRef = map;
@@ -2294,61 +2093,54 @@ 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 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
     }, {
-      scopedSlots: this.$scopedSlots,
-      on: this.$listeners
-    }]));
+      on: this.$attrs
+    }), null);
   }
 };
-
 ReactiveGoogleMap.install = function (Vue, options) {
   Vue.component(ReactiveGoogleMap.name, ReactiveGoogleMap);
-
   if (!options || !options.key) {
     console.error('ReactiveSearch: map key is required to use ReactiveGoogleMap component');
   }
-
-  Vue.use(GmapVue, {
+  Vue.use(VueGoogleMaps, {
     load: {
       key: options.key,
       libraries: 'places'
     },
     installComponents: false
   });
-}; // Add componentType for SSR
-
+};
 
+// Add componentType for SSR
 ReactiveGoogleMap.componentType = componentTypes.reactiveMap;
 
 export default ReactiveGoogleMap;