@appbaseio/reactivesearch-vue 1.16.0-alpha.3 → 1.16.0-alpha.30

package/dist/es/ReactiveGoogleMap.js

@@ -1,25 +1,25 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends, b as _objectWithoutPropertiesLoose, d as _inheritsLoose, _ as _taggedTemplateLiteralLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-c9fbe19f.js';
+import { a as _extends, d as _inheritsLoose, _ as _taggedTemplateLiteralLoose, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-ecf6c03c.js';
 import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import 'emotion';
 import styled, { css } from '@appbaseio/vue-emotion';
 import 'polished';
-import './Button-6c71c66e.js';
-import { t as types } from './vueTypes-98d938a9.js';
-import { P as Pagination } from './Pagination-800af44f.js';
+import './Button-799185e2.js';
+import { t as types } from './vueTypes-9326e0be.js';
+import { P as Pagination } from './Pagination-b3e4054a.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-1fe91a0a.js';
-import { C as ComponentWrapper } from './ComponentWrapper-d0b21b95.js';
+import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, a as isFunction, c as connect } from './index-4755c9a0.js';
+import { C as ComponentWrapper } from './ComponentWrapper-459505fd.js';
 import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import { C as Checkbox } from './FormControlList-b96aebef.js';
+import { C as Checkbox } from './FormControlList-fe389a2e.js';
 import * as GmapMapFull from 'gmap-vue';
 import Map from 'gmap-vue/dist/components-implementation/map';
 import geohash from 'ngeohash';
 import GmapCluster from 'gmap-vue/dist/components/cluster';
-import Marker from 'gmap-vue/dist/components/marker';
 import InfoWindow from 'gmap-vue/dist/components-implementation/info-window';
+import Marker from 'gmap-vue/dist/components/marker';
 import MapElementMixin from 'gmap-vue/dist/mixins/map-element';
 
 var setStreaming = Actions.setStreaming,
@@ -68,7 +68,7 @@ function withDistinctLat(loc, count) {
 
   var suffix = 1 / Math.pow(10, noiseFactor) * count;
 
-  var location = _extends(_extends({}, loc), {}, {
+  var location = _extends({}, loc, {
     lat: parseFloat((loc.lat + suffix).toFixed(length))
   });
 
@@ -120,14 +120,13 @@ var ReactiveMap = {
     react: types.react,
     size: types.number,
     sortBy: types.sortBy,
-    URLParams: types.bool,
-    autoCenter: types.bool,
+    URLParams: VueTypes.bool,
+    autoCenter: VueTypes.bool,
     getMapRef: VueTypes.func.isRequired,
     center: types.location,
     defaultCenter: types.location,
     defaultPin: types.string,
     defaultZoom: VueTypes.number.def(13),
-    markerProps: types.props,
     defaultQuery: types.func,
     innerClass: types.style,
     loader: types.title,
@@ -136,19 +135,19 @@ var ReactiveMap = {
     renderError: types.title,
     pages: VueTypes.number.def(5),
     currentPage: VueTypes.number.def(0),
-    pagination: types.bool,
-    showMarkers: types.bool,
-    defaultSearchAsMove: types.bool,
-    showSearchAsMove: types.bool,
+    pagination: VueTypes.bool,
+    showMarkers: VueTypes.bool,
+    defaultSearchAsMove: VueTypes.bool,
+    showSearchAsMove: VueTypes.bool,
     defaultRadius: types.number,
     unit: types.string,
-    autoClosePopover: types.bool,
+    autoClosePopover: VueTypes.bool,
     renderMap: VueTypes.func.isRequired,
     renderPopover: VueTypes.func,
-    onDragEnd: types.func,
-    onZoomChanged: types.func,
-    onIdle: types.func
+    calculateMarkers: VueTypes.func,
+    searchAsMoveLabel: VueTypes.string.def('Search as I move the map')
   },
+  preserveCenter: false,
   data: function data() {
     var props = this.$props;
     var currentPageState = 0;
@@ -162,8 +161,8 @@ var ReactiveMap = {
       zoom: props.defaultZoom,
       searchAsMove: props.defaultSearchAsMove,
       currentPageState: currentPageState,
-      preserveCenter: false,
-      mapBoxBounds: null
+      mapBoxBounds: null,
+      markersData: null
     };
     return this.__state;
   },
@@ -175,7 +174,7 @@ var ReactiveMap = {
       var _this$getAllData = this.getAllData(),
           resultsToRender = _this$getAllData.resultsToRender;
 
-      return _extends(_extends({}, getResultStats(this)), {}, {
+      return _extends({}, getResultStats(this), {
         currentPage: this.currentPageState,
         displayedResults: resultsToRender.length
       });
@@ -210,16 +209,19 @@ var ReactiveMap = {
         var queryOptions = getOptionsFromQuery(this.$defaultQuery);
 
         if (queryOptions) {
-          options = _extends(_extends({}, options), getOptionsFromQuery(this.$defaultQuery));
+          options = _extends({}, options, getOptionsFromQuery(this.$defaultQuery));
         } // Update calculated default query in store
 
 
-        this.setQueryOptions(this.$props.componentId, options, !query);
+        this.setQueryOptions(this.$props.componentId, options, false);
         var persistMapQuery = true;
         var forceExecute = true; // Update default query to include the geo bounding box query
 
         this.setDefaultQueryForRSAPI();
-        this.props.setMapData(this.componentId, query, persistMapQuery, forceExecute);
+        var meta = {
+          mapBoxBounds: this.mapBoxBounds
+        };
+        this.setMapData(this.componentId, query, persistMapQuery, forceExecute, meta);
         this.currentPageState = 0;
         this.from = 0;
       }
@@ -250,7 +252,45 @@ var ReactiveMap = {
       }
     },
     rawData: function rawData(newVal, oldVal) {
+      var _this = this;
+
       if (!isEqual(newVal, oldVal)) {
+        var promotedResults = this.promotedResults,
+            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());
       }
     },
@@ -288,18 +328,18 @@ var ReactiveMap = {
       return this.parseLocation(MAP_CENTER);
     },
     addNoise: function addNoise(hits) {
-      var _this = this;
+      var _this2 = this;
 
       var hitMap = {};
       var updatedHits = [];
       hits.forEach(function (item) {
         var updatedItem = _extends({}, item);
 
-        var location = _this.parseLocation(item[_this.dataField]);
+        var location = _this2.parseLocation(item[_this2.dataField]);
 
         var key = JSON.stringify(location);
         var count = hitMap[key] || 0;
-        updatedItem[_this.dataField] = count ? withDistinctLat(location, count) : location;
+        updatedItem[_this2.dataField] = count ? withDistinctLat(location, count) : location;
         updatedHits = [].concat(updatedHits, [updatedItem]);
         hitMap[key] = count + 1;
       });
@@ -313,10 +353,10 @@ var ReactiveMap = {
       return null;
     },
     getHitsCenter: function getHitsCenter(hits) {
-      var _this2 = this;
+      var _this3 = this;
 
       var data = hits.map(function (hit) {
-        return hit[_this2.dataField];
+        return hit[_this3.dataField];
       });
 
       if (data.length) {
@@ -357,7 +397,7 @@ var ReactiveMap = {
       return false;
     },
     getCenter: function getCenter(hits) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (this.center) {
         return this.parseLocation(this.center);
@@ -365,10 +405,10 @@ var ReactiveMap = {
 
       var mapRef = this.getMapRef();
 
-      if (mapRef && typeof mapRef.getCenter === 'function' && this.preserveCenter) {
+      if (mapRef && typeof mapRef.getCenter === 'function' && this.$options.preserveCenter) {
         var currentCenter = mapRef.getCenter();
         setTimeout(function () {
-          _this3.preserveCenter = false;
+          _this4.$options.preserveCenter = false;
         }, 100);
         return this.parseLocation({
           lat: currentCenter.lat(),
@@ -388,27 +428,31 @@ var ReactiveMap = {
     },
     handleZoomChange: function handleZoomChange(zoom) {
       if (zoom) {
+        var prevZoom = this.zoom;
+
         if (this.searchAsMove) {
           this.zoom = zoom;
-          this.preserveCenter = true;
+          this.$options.preserveCenter = true;
           this.setGeoQuery(true);
         } else {
           this.zoom = zoom;
         }
 
-        if (this.onZoomChanged) this.onZoomChanged(zoom);
+        if (prevZoom !== zoom) {
+          this.$emit('zoom-changed', zoom);
+        }
       }
     },
     handleOnDragEnd: function handleOnDragEnd() {
       if (this.searchAsMove) {
-        this.preserveCenter = true;
+        this.$options.preserveCenter = true;
         this.setGeoQuery(true);
       }
 
-      if (this.onDragEnd) this.onDragEnd();
+      this.$emit('drag-end');
     },
     handlePreserveCenter: function handlePreserveCenter(preserveCenter) {
-      this.preserveCenter = preserveCenter;
+      this.$options.preserveCenter = preserveCenter;
     },
     handleOnIdle: function handleOnIdle() {
       // only make the geo_bounding query if we have hits data
@@ -419,7 +463,7 @@ var ReactiveMap = {
         this.setGeoQuery(executeUpdate);
       }
 
-      if (this.onIdle) this.onIdle();
+      this.$emit('idle');
     },
     setGeoQuery: function setGeoQuery(executeUpdate) {
       if (executeUpdate === void 0) {
@@ -448,7 +492,6 @@ var ReactiveMap = {
           defaultPin = this.defaultPin,
           renderPopover = this.renderPopover,
           autoClosePopover = this.autoClosePopover,
-          markerProps = this.markerProps,
           renderItem = this.renderItem;
       return {
         resultsToRender: data,
@@ -461,17 +504,14 @@ var ReactiveMap = {
         renderPopover: renderPopover,
         autoClosePopover: autoClosePopover,
         renderSearchAsMove: this.renderSearchAsMove,
-        markerProps: markerProps,
         handlePreserveCenter: this.handlePreserveCenter,
-        preserveCenter: this.preserveCenter,
+        preserveCenter: this.$options.preserveCenter,
         handleOnDragEnd: this.handleOnDragEnd,
         handleOnIdle: this.handleOnIdle,
         handleZoomChange: this.handleZoomChange
       };
     },
     getAllData: function getAllData() {
-      var _this4 = this;
-
       var size = this.size,
           promotedResults = this.promotedResults,
           customData = this.customData,
@@ -479,31 +519,13 @@ var ReactiveMap = {
           hits = this.hits;
       var results = parseHits(hits) || [];
       var parsedPromotedResults = parseHits(promotedResults) || [];
-      var filteredResults = results;
       var base = currentPage * size;
+      var resultsToRender = this.filteredResults || [];
 
-      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);
+      if (this.markersData) {
+        resultsToRender = this.markersData;
       }
 
-      filteredResults = filteredResults.filter(function (item) {
-        return !!item[_this4.dataField];
-      }).map(function (item) {
-        var _extends2;
-
-        return _extends(_extends({}, item), {}, (_extends2 = {}, _extends2[_this4.dataField] = getLocationObject(item[_this4.dataField]), _extends2));
-      });
-      var resultsToRender = this.addNoise(filteredResults);
       return {
         results: results,
         resultsToRender: resultsToRender,
@@ -554,7 +576,7 @@ var ReactiveMap = {
         options.from = this.$data.from;
         this.from = value;
         this.currentPageState = page;
-        this.loadMoreAction(this.componentId, _extends(_extends({}, options), {}, {
+        this.loadMoreAction(this.componentId, _extends({}, options, {
           from: value
         }), false);
 
@@ -566,29 +588,6 @@ var ReactiveMap = {
     setDefaultQueryForRSAPI: function setDefaultQueryForRSAPI() {
       if (this.defaultQuery && typeof this.defaultQuery === 'function') {
         var defaultQuery = this.defaultQuery();
-
-        if (this.mapBoxBounds) {
-          var _geo_bounding_box;
-
-          var geoQuery = {
-            geo_bounding_box: (_geo_bounding_box = {}, _geo_bounding_box[this.dataField] = this.mapBoxBounds, _geo_bounding_box)
-          };
-
-          var _defaultQuery = defaultQuery,
-              query = _defaultQuery.query,
-              options = _objectWithoutPropertiesLoose(_defaultQuery, ["query"]);
-
-          if (query) {
-            // adds defaultQuery's query to geo-query
-            // to generate a map query
-            defaultQuery = _extends({
-              query: {
-                must: [geoQuery, query]
-              }
-            }, options);
-          }
-        }
-
         this.setDefaultQuery(this.componentId, defaultQuery);
       }
     },
@@ -612,7 +611,7 @@ var ReactiveMap = {
       var west;
 
       if (mapBounds) {
-        var _geo_bounding_box2;
+        var _geo_bounding_box;
 
         north = mapBounds.getNorthEast().lat();
         south = mapBounds.getSouthWest().lat();
@@ -624,7 +623,7 @@ var ReactiveMap = {
         };
         this.mapBoxBounds = boundingBoxCoordinates;
         var geoQuery = {
-          geo_bounding_box: (_geo_bounding_box2 = {}, _geo_bounding_box2[this.dataField] = boundingBoxCoordinates, _geo_bounding_box2)
+          geo_bounding_box: (_geo_bounding_box = {}, _geo_bounding_box[this.dataField] = boundingBoxCoordinates, _geo_bounding_box)
         };
 
         if (this.$defaultQuery) {
@@ -667,7 +666,7 @@ var ReactiveMap = {
         var value = this.from + this.size;
         var options = getQueryOptions(this.$props);
         this.from = value;
-        this.loadMoreAction(this.componentId, _extends(_extends({}, options), {}, {
+        this.loadMoreAction(this.componentId, _extends({}, options, {
           from: value
         }), true);
       }
@@ -695,13 +694,14 @@ var ReactiveMap = {
           base = _this$getAllData3.base;
 
       return results.map(function (result, index) {
-        return _extends(_extends({}, result), {}, {
+        return _extends({}, result, {
           _click_id: base + index
         });
       });
     },
     toggleSearchAsMove: function toggleSearchAsMove() {
       this.searchAsMove = !this.searchAsMove;
+      this.$emit('search-as-move', this.searchAsMove);
     },
     renderErrorComponent: function renderErrorComponent() {
       var renderError = this.$scopedSlots.renderError || this.$props.renderError;
@@ -747,7 +747,7 @@ var ReactiveMap = {
             "className": getClassName(this.innerClass, 'label') || null,
             "for": this.$props.componentId + "-searchasmove"
           }
-        }, ["Search as I move the map"])]);
+        }, [this.searchAsMoveLabel])]);
       }
 
       return null;
@@ -801,7 +801,7 @@ var ReactiveMap = {
 
     if (this.$props.defaultQuery) {
       this.$defaultQuery = this.$props.defaultQuery();
-      options = _extends(_extends({}, options), getOptionsFromQuery(this.$defaultQuery)); // Override sort query with defaultQuery's sort if defined
+      options = _extends({}, options, getOptionsFromQuery(this.$defaultQuery)); // Override sort query with defaultQuery's sort if defined
 
       if (this.$defaultQuery.sort) {
         options.sort = this.$defaultQuery.sort;
@@ -815,7 +815,10 @@ var ReactiveMap = {
       var forceExecute = false; // Update default query for RS API
 
       this.setDefaultQueryForRSAPI();
-      this.setMapData(this.componentId, this.$defaultQuery.query, persistMapQuery, forceExecute);
+      var meta = {
+        mapBoxBounds: this.mapBoxBounds
+      };
+      this.setMapData(this.componentId, this.$defaultQuery.query, persistMapQuery, forceExecute, meta);
     } else {
       // only apply geo-distance when defaultQuery prop is not set
       var query = this.getGeoDistanceQuery();
@@ -835,11 +838,11 @@ var ReactiveMap = {
 
         var center = this.center || this.defaultCenter;
         var coordinatesObject = this.getArrPosition(center);
-        var meta = {
+        var _meta = {
           distance: this.defaultRadius,
           coordinates: coordinatesObject.lat + ", " + coordinatesObject.lon
         };
-        this.setMapData(this.componentId, query, _persistMapQuery, _forceExecute, meta);
+        this.setMapData(this.componentId, query, _persistMapQuery, _forceExecute, _meta);
       }
     }
 
@@ -849,7 +852,7 @@ var ReactiveMap = {
     var h = arguments[0];
     var loader = this.$scopedSlots.loader || this.$props.loader;
     return h("div", {
-      "style": _extends(_extends({}, style), this.$props.style),
+      "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]);
   }
@@ -893,9 +896,46 @@ ReactiveMap.install = function (Vue) {
 
 ReactiveMap.componentType = componentTypes.reactiveMap;
 
+var InfoWindowWrapper = {
+  name: 'InfoWindowWrapper',
+  props: {
+    id: VueTypes.string,
+    renderPopover: VueTypes.func,
+    infoWindowProps: VueTypes.object,
+    events: VueTypes.object
+  },
+  data: function data() {
+    return {
+      infoWindowRef: null
+    };
+  },
+  mounted: function mounted() {
+    this.infoWindowRef = this.$refs[this.id + "-Info-Window"];
+  },
+  methods: {
+    handleClose: function handleClose() {
+      this.infoWindowRef.$infoWindowObject.close();
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    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)])]);
+  }
+};
+
 var MarkerWithLabel = {
   name: 'MarkerWithLabel',
   props: {
+    metaData: {
+      type: Object,
+      "default": undefined
+    },
     marker: {
       type: Object,
       "default": undefined
@@ -995,6 +1035,7 @@ var MarkerWithLabel = {
           var _this3;
 
           _this3 = _window$google$maps$O.call(this) || this;
+          _this3.metaData = self.metaData;
 
           _this3.setMap(map2);
 
@@ -1160,47 +1201,17 @@ var MarkerWithLabel = {
       },
       "on": {
         "mouseover": this.handleMouseOver,
-        "focus": this.handleFocus,
         "mouseout": this.handleMouseOut,
-        "blur": this.handleBlur,
         "click": this.handleClick
       }
     }, [this.renderMarker()]);
   }
 };
 
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\t&:hover,\n\t&:focus {\n\t\tz-index: 200;\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _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"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _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"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var MapPin = styled('div')(_templateObject());
-var MapPinArrow = styled('div')(_templateObject2());
-var mapPinWrapper = css(_templateObject3());
+var _templateObject, _templateObject2, _templateObject3;
+var MapPin = styled('div')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\theight: 24px;\n\twidth: auto;\n\tbackground-color: #fff;\n\tborder-radius: 2px;\n\tcolor: #222;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);\n\tpadding: 3px 6px;\n\tfont-size: 15px;\n"])));
+var MapPinArrow = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tborder-color: rgba(0, 0, 0, 0.2);\n\tborder-style: solid;\n\tborder-width: 0 1px 1px 0;\n\tmargin-left: -6px;\n\tbackground-color: #fff;\n\tmargin-top: -6px;\n\twidth: 12px;\n\theight: 12px;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n"])));
+var mapPinWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\t&:hover,\n\t&:focus {\n\t\tz-index: 200;\n\t}\n"])));
 
 var recordResultClick$1 = Actions.recordResultClick;
 var GoogleMapMarker = {
@@ -1209,54 +1220,62 @@ var GoogleMapMarker = {
     index: VueTypes.number,
     marker: VueTypes.object.isRequired,
     getPosition: VueTypes.func.isRequired,
-    markerOnTop: VueTypes.string,
     defaultPin: VueTypes.string,
     renderItem: VueTypes.func,
-    setMarkerOnTop: VueTypes.func.isRequired,
     setOpenMarkers: VueTypes.func.isRequired,
     handlePreserveCenter: VueTypes.func.isRequired,
     autoClosePopover: VueTypes.bool,
     openMarkers: VueTypes.object,
-    renderPopover: VueTypes.func
+    renderPopover: VueTypes.func,
+    highlightMarkerOnHover: VueTypes.bool
+  },
+  data: function data() {
+    return {
+      zIndex: 0
+    };
   },
   methods: {
     increaseMarkerZIndex: function increaseMarkerZIndex() {
-      var _this$$props = this.$props,
-          handleTopMarker = _this$$props.setMarkerOnTop,
-          handlePreserveCenter = _this$$props.handlePreserveCenter,
-          marker = _this$$props.marker;
-      handleTopMarker(marker._id);
+      var handlePreserveCenter = this.$props.handlePreserveCenter;
+
+      if (this.highlightMarkerOnHover) {
+        this.zIndex += 1;
+      }
+
       handlePreserveCenter(true);
     },
     removeMarkerZIndex: function removeMarkerZIndex() {
-      var _this$$props2 = this.$props,
-          handleTopMarker = _this$$props2.setMarkerOnTop,
-          handlePreserveCenter = _this$$props2.handlePreserveCenter;
-      handleTopMarker(null);
+      var handlePreserveCenter = this.$props.handlePreserveCenter;
+
+      if (this.highlightMarkerOnHover) {
+        this.zIndex -= 1;
+      }
+
       handlePreserveCenter(true);
     },
     openMarker: function openMarker() {
       var _ref, _extends2;
 
-      var _this$$props3 = this.$props,
-          handleOpenMarkers = _this$$props3.setOpenMarkers,
-          openMarkers = _this$$props3.openMarkers,
-          marker = _this$$props3.marker,
-          autoClosePopover = _this$$props3.autoClosePopover,
-          handlePreserveCenter = _this$$props3.handlePreserveCenter;
+      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;
       var id = marker._id;
-      var newOpenMarkers = autoClosePopover ? (_ref = {}, _ref[id] = true, _ref) : _extends(_extends({}, openMarkers), {}, (_extends2 = {}, _extends2[id] = true, _extends2));
+      var newOpenMarkers = autoClosePopover ? (_ref = {}, _ref[id] = true, _ref) : _extends({}, openMarkers, (_extends2 = {}, _extends2[id] = true, _extends2));
       handleOpenMarkers(newOpenMarkers);
       handlePreserveCenter(true);
       this.triggerAnalytics();
+      this.$emit('open-marker-popover', marker);
     },
     closeMarker: function closeMarker() {
-      var _this$$props4 = this.$props,
-          handleOpenMarkers = _this$$props4.setOpenMarkers,
-          marker = _this$$props4.marker,
-          autoClosePopover = _this$$props4.autoClosePopover,
-          handlePreserveCenter = _this$$props4.handlePreserveCenter,
-          openMarkers = _this$$props4.openMarkers;
+      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;
       var id = marker._id;
 
       var del = openMarkers[id],
@@ -1265,6 +1284,7 @@ var GoogleMapMarker = {
       var newOpenMarkers = autoClosePopover ? {} : activeMarkers;
       handleOpenMarkers(newOpenMarkers);
       handlePreserveCenter(true);
+      this.$emit('close-marker-popover', marker);
     },
     triggerAnalytics: function triggerAnalytics() {
       this.recordResultClick(this.index, this.marker._id);
@@ -1278,10 +1298,10 @@ var GoogleMapMarker = {
 
       var h = this.$createElement;
       var additionalProps = {};
-      var _this$$props5 = this.$props,
-          getPosition = _this$$props5.getPosition,
-          renderPopover = _this$$props5.renderPopover,
-          openMarkers = _this$$props5.openMarkers;
+      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
@@ -1294,19 +1314,32 @@ var GoogleMapMarker = {
       }
 
       if (item._id in openMarkers) {
-        return h(InfoWindow, {
-          "attrs": {
-            "zIndex": 500,
-            "position": additionalProps.position,
-            "options": additionalProps.defaultOptions
-          },
+        return h(InfoWindowWrapper, {
           "key": item._id + "-InfoWindow",
-          "on": {
-            "closeclick": function closeclick() {
-              return _this.closeMarker();
+          "attrs": {
+            "id": item._id,
+            "renderPopover": function renderPopover(_handleClose) {
+              return _renderPopover({
+                item: item,
+                handleClose: function handleClose() {
+                  _handleClose();
+
+                  _this.closeMarker();
+                }
+              });
+            },
+            "infoWindowProps": {
+              zIndex: 500,
+              position: additionalProps.position,
+              options: additionalProps.defaultOptions
+            },
+            "events": {
+              closeclick: function closeclick() {
+                return _this.closeMarker();
+              }
             }
           }
-        }, [h("div", [renderPopover(item)])]);
+        });
       }
 
       return null;
@@ -1316,20 +1349,17 @@ var GoogleMapMarker = {
     var _this2 = this;
 
     var h = arguments[0];
-    var _this$$props6 = this.$props,
-        getPosition = _this$$props6.getPosition,
-        renderItem = _this$$props6.renderItem,
-        defaultPin = _this$$props6.defaultPin,
-        autoClosePopover = _this$$props6.autoClosePopover,
-        handlePreserveCenter = _this$$props6.handlePreserveCenter,
-        renderPopover = _this$$props6.renderPopover,
-        customMarkerProps = _this$$props6.markerProps,
-        marker = _this$$props6.marker,
-        markerOnTop = _this$$props6.markerOnTop;
+    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;
     var markerProps = {};
 
-    if (markerOnTop === marker._id) {
-      markerProps.zIndex = window.google.maps.Marker.MAX_ZINDEX + 1;
+    if (this.zIndex) {
+      markerProps.zIndex = window.google.maps.Marker.MAX_ZINDEX + this.zIndex;
     }
 
     if (renderItem) {
@@ -1339,12 +1369,11 @@ var GoogleMapMarker = {
         return h(MarkerWithLabel, {
           "key": marker._id,
           "attrs": {
+            "metaData": marker,
             "marker": getPosition(marker),
             "labelAnchor": new window.google.maps.Point(0, 30),
             "handleMouseOver": this.increaseMarkerZIndex,
-            "handleFocus": this.increaseMarkerZIndex,
             "handleMouseOut": this.removeMarkerZIndex,
-            "handleBlur": this.removeMarkerZIndex,
             "handleClick": this.openMarker,
             "zIndex": markerProps.zIndex,
             "renderMarker": function renderMarker() {
@@ -1365,12 +1394,11 @@ var GoogleMapMarker = {
         return h(MarkerWithLabel, {
           "key": marker._id,
           "attrs": {
+            "metaData": marker,
             "marker": getPosition(marker),
             "handleClick": this.openMarker,
             "handleMouseOver": this.increaseMarkerZIndex,
-            "handleFocus": this.increaseMarkerZIndex,
             "handleMouseOut": this.removeMarkerZIndex,
-            "handleBlur": this.removeMarkerZIndex,
             "zIndex": markerProps.zIndex,
             "renderMarker": function renderMarker() {
               return h("div", {
@@ -1394,16 +1422,17 @@ var GoogleMapMarker = {
       "attrs": {
         "icon": markerProps.icon,
         "zIndex": markerProps.zIndex,
-        "position": getPosition(marker)
+        "position": getPosition(marker),
+        "options": {
+          metaData: marker
+        }
       },
       "on": {
         "click": function click() {
-          return _this2.openMarker(marker._id, autoClosePopover || false, handlePreserveCenter);
+          return _this2.openMarker();
         },
         "mouseover": this.increaseMarkerZIndex,
-        "focus": this.increaseMarkerZIndex,
-        "mouseout": this.removeMarkerZIndex,
-        "blur": this.removeMarkerZIndex
+        "mouseout": this.removeMarkerZIndex
       },
       "props": _extends({}, customMarkerProps)
     }, [renderPopover ? this.renderPopoverClick(marker) : null]);
@@ -1422,34 +1451,60 @@ var GoogleMapMarkers = {
     resultsToRender: VueTypes.array,
     getPosition: VueTypes.func,
     renderItem: VueTypes.func,
+    renderClusterPopover: VueTypes.func,
     defaultPin: VueTypes.string,
     autoClosePopover: VueTypes.bool,
     handlePreserveCenter: VueTypes.func,
     renderPopover: VueTypes.func,
     markerProps: VueTypes.object,
-    showMarkerClusters: VueTypes.bool
+    clusterProps: VueTypes.object,
+    showMarkerClusters: VueTypes.bool,
+    highlightMarkerOnHover: VueTypes.bool
   },
   data: function data() {
     return {
-      markerOnTop: null,
-      openMarkers: {}
+      openMarkers: {},
+      clickedCluster: null,
+      clusterMarkers: []
     };
   },
   methods: {
-    setMarkerOnTop: function setMarkerOnTop(markerOnTop) {
-      this.markerOnTop = markerOnTop;
-    },
     setOpenMarkers: function setOpenMarkers(openMarkers) {
       this.openMarkers = openMarkers;
+    },
+    getClusterMarkers: function getClusterMarkers() {
+      if (this.clickedCluster && Array.isArray(this.clickedCluster.getMarkers())) {
+        return this.clickedCluster.getMarkers().map(function (marker) {
+          return marker.metaData;
+        });
+      }
+
+      return [];
+    },
+    getAdditionalProps: function getAdditionalProps() {
+      return {
+        position: {
+          lat: this.clickedCluster.getCenter().lat(),
+          lng: this.clickedCluster.getCenter().lng()
+        },
+        defaultOptions: {
+          pixelOffset: new window.google.maps.Size(0, -30)
+        }
+      };
+    },
+    closeMarker: function closeMarker() {
+      this.clickedCluster = null;
+      this.clusterMarkers = [];
+      this.$emit('close-cluster-popover');
     }
   },
   render: function render() {
+    var _this = this;
+
     var h = arguments[0];
     var resultsToRender = this.$props.resultsToRender;
-    var markerOnTop = this.markerOnTop,
-        openMarkers = this.openMarkers;
+    var openMarkers = this.openMarkers;
     var markerProps = {
-      markerOnTop: markerOnTop,
       openMarkers: openMarkers,
       setMarkerOnTop: this.setMarkerOnTop,
       setOpenMarkers: this.setOpenMarkers,
@@ -1460,19 +1515,55 @@ var GoogleMapMarkers = {
       handlePreserveCenter: this.handlePreserveCenter,
       renderPopover: this.renderPopover,
       markerProps: this.markerProps,
-      showMarkerClusters: this.showMarkerClusters
+      showMarkerClusters: this.showMarkerClusters,
+      highlightMarkerOnHover: this.highlightMarkerOnHover
     };
 
     if (this.showMarkerClusters) {
-      return h(GmapCluster, [resultsToRender.map(function (marker, index) {
+      return h("div", [h(GmapCluster, {
+        "props": _extends({}, this.clusterProps),
+        "on": {
+          "click": function click(cluster) {
+            _this.clickedCluster = cluster;
+            _this.clusterMarkers = _this.getClusterMarkers();
+
+            _this.$emit('open-cluster-popover', _this.clusterMarkers);
+          }
+        },
+        "ref": "clusterRef"
+      }, [resultsToRender.map(function (marker, index) {
         return h(GoogleMapMarker$1, {
           "attrs": {
             "index": index,
             "marker": marker
           },
-          "props": _extends({}, markerProps)
+          "props": _extends({}, markerProps),
+          "on": _extends({}, _this.$listeners)
         });
-      })]);
+      })]), this.clickedCluster && this.renderClusterPopover ? h(InfoWindowWrapper, {
+        "attrs": {
+          "id": "cluster",
+          "infoWindowProps": {
+            zIndex: 500,
+            position: this.getAdditionalProps().position,
+            options: this.getAdditionalProps().defaultOptions
+          },
+          "renderPopover": function renderPopover(_handleClose) {
+            return _this.renderClusterPopover({
+              markers: _this.clusterMarkers,
+              cluster: _this.clickedCluster,
+              handleClose: function handleClose() {
+                _handleClose();
+
+                _this.closeMarker();
+              }
+            });
+          },
+          "events": {
+            closeclick: this.closeMarker
+          }
+        }
+      }) : null]);
     }
 
     return h("div", [resultsToRender.map(function (marker, index) {
@@ -1481,7 +1572,8 @@ var GoogleMapMarkers = {
           "index": index,
           "marker": marker
         },
-        "props": _extends({}, markerProps)
+        "props": _extends({}, markerProps),
+        "on": _extends({}, _this.$listeners)
       });
     })]);
   }
@@ -1493,19 +1585,22 @@ var ReactiveGoogleMap = {
     className: types.string,
     componentId: types.stringRequired,
     dataField: types.stringRequired,
+    defaultQuery: VueTypes.func,
     loader: types.title,
     defaultZoom: VueTypes.number.def(13),
     react: types.react,
     size: types.number,
     sortBy: types.sortBy,
-    URLParams: types.bool,
+    URLParams: VueTypes.bool,
     mapProps: VueTypes.object,
     showMarkers: VueTypes.bool.def(true),
     showMarkerClusters: VueTypes.bool.def(false),
     searchAsMove: VueTypes.bool.def(false),
-    markerProps: types.props,
+    searchAsMoveLabel: VueTypes.string,
+    markerProps: VueTypes.object,
+    clusterProps: VueTypes.object,
     renderItem: VueTypes.func,
-    showSearchAsMove: types.bool.def(true),
+    showSearchAsMove: VueTypes.bool.def(true),
     autoClosePopover: VueTypes.bool,
     pagination: VueTypes.bool,
     defaultPin: VueTypes.string,
@@ -1514,7 +1609,9 @@ var ReactiveGoogleMap = {
     center: types.location,
     defaultRadius: types.number,
     unit: types.string,
-    pages: VueTypes.number.def(5)
+    pages: VueTypes.number.def(5),
+    calculateMarkers: VueTypes.func,
+    highlightMarkerOnHover: VueTypes.bool.def(true)
   },
   methods: {
     renderMap: function renderMap(_ref) {
@@ -1529,9 +1626,7 @@ var ReactiveGoogleMap = {
           renderSearchAsMove = _ref.renderSearchAsMove,
           handlePreserveCenter = _ref.handlePreserveCenter,
           getPosition = _ref.getPosition,
-          markerProps = _ref.markerProps,
           autoClosePopover = _ref.autoClosePopover,
-          renderPopover = _ref.renderPopover,
           defaultPin = _ref.defaultPin;
       var h = this.$createElement;
       var style = {
@@ -1564,8 +1659,10 @@ var ReactiveGoogleMap = {
         "attrs": {
           "resultsToRender": resultsToRender,
           "getPosition": getPosition,
-          "markerProps": markerProps,
+          "markerProps": this.markerProps,
+          "clusterProps": this.clusterProps,
           "handlePreserveCenter": handlePreserveCenter,
+          "highlightMarkerOnHover": this.highlightMarkerOnHover,
           "renderItem": this.$scopedSlots.renderItem ? function () {
             return {
               custom: _this.$scopedSlots.renderItem
@@ -1573,9 +1670,11 @@ var ReactiveGoogleMap = {
           } : this.renderItem,
           "defaultPin": defaultPin,
           "autoClosePopover": autoClosePopover,
-          "renderPopover": renderPopover,
+          "renderPopover": this.$scopedSlots.renderPopover,
+          "renderClusterPopover": this.$scopedSlots.renderClusterPopover,
           "showMarkerClusters": this.showMarkerClusters
-        }
+        },
+        "on": _extends({}, this.$listeners)
       }) : null]), renderSearchAsMove()]);
     },
     getMapRef: function getMapRef() {
@@ -1592,8 +1691,6 @@ var ReactiveGoogleMap = {
     }
   },
   render: function render() {
-    var _this3 = this;
-
     var h = arguments[0];
     return h(RMConnected, _mergeJSXProps([{
       "attrs": {
@@ -1610,31 +1707,20 @@ var ReactiveGoogleMap = {
         "uRLParams": this.URLParams,
         "defaultSearchAsMove": this.searchAsMove,
         "showSearchAsMove": this.showSearchAsMove,
+        "searchAsMoveLabel": this.searchAsMoveLabel,
         "showMarkers": this.showMarkers,
         "markerProps": this.markerProps,
         "autoClosePopover": this.autoClosePopover,
         "defaultPin": this.defaultPin,
-        "renderPopover": this.$scopedSlots.renderPopover ? function (item) {
-          return _this3.$scopedSlots.renderPopover(item);
-        } : null,
+        "defaultQuery": this.defaultQuery,
         "autoCenter": this.autoCenter,
         "defaultCenter": this.defaultCenter,
         "defaultRadius": this.defaultRadius,
         "unit": this.unit,
         "pages": this.pages,
         "center": this.center,
-        "loader": this.loader
-      },
-      "on": {
-        "zoomChanged": function zoomChanged(zoom) {
-          _this3.$emit('zoom-changed', zoom);
-        },
-        "idle": function idle() {
-          _this3.$emit('idle');
-        },
-        "dragEnd": function dragEnd() {
-          _this3.$emit('drag-end');
-        }
+        "loader": this.loader,
+        "calculateMarkers": this.calculateMarkers
       }
     }, {
       scopedSlots: this.$scopedSlots,