@appbaseio/reactivesearch-vue 1.16.0-alpha.6 → 1.16.0-alpha.60

package/dist/es/ReactiveGoogleMap.js

@@ -1,26 +1,21 @@
 import { Actions, helper } from '@appbaseio/reactivecore';
-import { a as _extends, b as _objectWithoutPropertiesLoose, d as _inheritsLoose, _ as _taggedTemplateLiteralLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import { a as _extends, d as _inheritsLoose, _ as _taggedTemplateLiteralLoose, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } 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 'polished';
-import './Button-27cc8574.js';
-import { t as types } from './vueTypes-98d938a9.js';
-import { P as Pagination } from './Pagination-c2a00175.js';
+import './Button-d8bc15ea.js';
+import { t as types } from './vueTypes-9326e0be.js';
+import { P as Pagination } from './Pagination-491c44ee.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-185b6266.js';
-import { C as ComponentWrapper } from './ComponentWrapper-c4c91949.js';
+import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, a as isFunction, c as connect } from './index-32f9d554.js';
+import { C as ComponentWrapper } from './ComponentWrapper-3654ce36.js';
 import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
-import { C as Checkbox } from './FormControlList-96d44e7b.js';
-import * as GmapMapFull from 'gmap-vue';
-import Map from 'gmap-vue/dist/components-implementation/map';
+import { C as Checkbox } from './FormControlList-c22d64f6.js';
+import GmapVue, { components } from 'gmap-vue';
 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 MapElementMixin from 'gmap-vue/dist/mixins/map-element';
 
 var setStreaming = Actions.setStreaming,
     setQueryOptions = Actions.setQueryOptions,
@@ -68,7 +63,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 +115,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,17 +130,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,
-    calculateMarkers: VueTypes.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;
@@ -160,7 +156,6 @@ var ReactiveMap = {
       zoom: props.defaultZoom,
       searchAsMove: props.defaultSearchAsMove,
       currentPageState: currentPageState,
-      preserveCenter: false,
       mapBoxBounds: null,
       markersData: null
     };
@@ -174,7 +169,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
       });
@@ -209,16 +204,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;
       }
@@ -277,7 +275,7 @@ var ReactiveMap = {
         }).map(function (item) {
           var _extends2;
 
-          return _extends(_extends({}, item), {}, (_extends2 = {}, _extends2[_this.dataField] = getLocationObject(item[_this.dataField]), _extends2));
+          return _extends({}, item, (_extends2 = {}, _extends2[_this.dataField] = getLocationObject(item[_this.dataField]), _extends2));
         });
         this.filteredResults = this.addNoise(filteredResults);
 
@@ -402,10 +400,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 () {
-          _this4.preserveCenter = false;
+          _this4.$options.preserveCenter = false;
         }, 100);
         return this.parseLocation({
           lat: currentCenter.lat(),
@@ -429,7 +427,7 @@ var ReactiveMap = {
 
         if (this.searchAsMove) {
           this.zoom = zoom;
-          this.preserveCenter = true;
+          this.$options.preserveCenter = true;
           this.setGeoQuery(true);
         } else {
           this.zoom = zoom;
@@ -442,14 +440,14 @@ var ReactiveMap = {
     },
     handleOnDragEnd: function handleOnDragEnd() {
       if (this.searchAsMove) {
-        this.preserveCenter = true;
+        this.$options.preserveCenter = true;
         this.setGeoQuery(true);
       }
 
       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
@@ -489,7 +487,6 @@ var ReactiveMap = {
           defaultPin = this.defaultPin,
           renderPopover = this.renderPopover,
           autoClosePopover = this.autoClosePopover,
-          markerProps = this.markerProps,
           renderItem = this.renderItem;
       return {
         resultsToRender: data,
@@ -502,9 +499,8 @@ 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
@@ -575,7 +571,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);
 
@@ -587,29 +583,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);
       }
     },
@@ -633,7 +606,7 @@ var ReactiveMap = {
       var west;
 
       if (mapBounds) {
-        var _geo_bounding_box2;
+        var _geo_bounding_box;
 
         north = mapBounds.getNorthEast().lat();
         south = mapBounds.getSouthWest().lat();
@@ -645,7 +618,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) {
@@ -688,7 +661,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);
       }
@@ -716,13 +689,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;
@@ -768,7 +742,7 @@ var ReactiveMap = {
             "className": getClassName(this.innerClass, 'label') || null,
             "for": this.$props.componentId + "-searchasmove"
           }
-        }, ["Search as I move the map"])]);
+        }, [this.searchAsMoveLabel])]);
       }
 
       return null;
@@ -822,7 +796,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;
@@ -836,7 +810,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();
@@ -856,11 +833,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);
       }
     }
 
@@ -870,7 +847,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]);
   }
@@ -914,9 +891,49 @@ ReactiveMap.install = function (Vue) {
 
 ReactiveMap.componentType = componentTypes.reactiveMap;
 
+var InfoWindow = components.InfoWindow;
+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 MapElementMixin = components.MapElementMixin; // Note: This file has been taken from https://github.com/eregnier/vue2-gmap-custom-marker/blob/master/gmap-custom-marker.vue
+
 var MarkerWithLabel = {
   name: 'MarkerWithLabel',
   props: {
+    metaData: {
+      type: Object,
+      "default": undefined
+    },
     marker: {
       type: Object,
       "default": undefined
@@ -1016,6 +1033,7 @@ var MarkerWithLabel = {
           var _this3;
 
           _this3 = _window$google$maps$O.call(this) || this;
+          _this3.metaData = self.metaData;
 
           _this3.setMap(map2);
 
@@ -1027,6 +1045,10 @@ var MarkerWithLabel = {
             return _this3.repaint();
           };
 
+          _this3.getVisible = function () {
+            return true;
+          };
+
           return _this3;
         }
 
@@ -1181,48 +1203,19 @@ 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 Marker = components.Marker;
 var recordResultClick$1 = Actions.recordResultClick;
 var GoogleMapMarker = {
   name: 'GoogleMapMarker',
@@ -1230,54 +1223,63 @@ 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,
+      markerIcon: null
+    };
   },
   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],
@@ -1286,6 +1288,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);
@@ -1299,10 +1302,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
@@ -1315,19 +1318,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;
@@ -1337,35 +1353,35 @@ 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) {
+      marker.setIcon = function (icon) {
+        _this2.markerIcon = icon;
+      };
+
       var data = renderItem(marker);
 
       if ('label' in data) {
         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() {
@@ -1386,12 +1402,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", {
@@ -1413,18 +1428,19 @@ var GoogleMapMarker = {
     return h(Marker, {
       "key": marker._id,
       "attrs": {
-        "icon": markerProps.icon,
         "zIndex": markerProps.zIndex,
-        "position": getPosition(marker)
+        "position": getPosition(marker),
+        "options": {
+          metaData: marker
+        },
+        "icon": this.markerIcon || markerProps.icon
       },
       "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]);
@@ -1437,40 +1453,58 @@ var GoogleMapMarker$1 = connect(function () {
   return null;
 }, mapDispatchToProps$1)(GoogleMapMarker);
 
+var Cluster = components.Cluster;
 var GoogleMapMarkers = {
   name: 'GoogleMapMarkers',
   props: {
     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;
+    },
+    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,
@@ -1481,19 +1515,58 @@ 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(Cluster, {
+        "props": _extends({}, this.clusterProps),
+        "on": {
+          "click": function click(cluster) {
+            var markers = cluster.markers.map(function (i) {
+              return i.metaData;
+            });
+            _this.clickedCluster = cluster;
+            _this.clusterMarkers = markers;
+
+            _this.$emit('open-cluster-popover', _this.clusterMarkers);
+          }
+        },
+        "ref": "clusterRef"
+      }, [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) {
@@ -1502,32 +1575,36 @@ var GoogleMapMarkers = {
           "index": index,
           "marker": marker
         },
-        "props": _extends({}, markerProps)
+        "props": _extends({}, markerProps),
+        "on": _extends({}, _this.$listeners)
       });
     })]);
   }
 };
 
+var Map = components.MapLayer;
 var ReactiveGoogleMap = {
   name: 'ReactiveGoogleMap',
   props: {
     className: types.string,
     componentId: types.stringRequired,
     dataField: types.stringRequired,
-    defaultQuery: types.func,
+    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,
@@ -1537,7 +1614,8 @@ var ReactiveGoogleMap = {
     defaultRadius: types.number,
     unit: types.string,
     pages: VueTypes.number.def(5),
-    calculateMarkers: VueTypes.func
+    calculateMarkers: VueTypes.func,
+    highlightMarkerOnHover: VueTypes.bool.def(true)
   },
   methods: {
     renderMap: function renderMap(_ref) {
@@ -1552,9 +1630,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 = {
@@ -1587,8 +1663,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
@@ -1596,9 +1674,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() {
@@ -1615,8 +1695,6 @@ var ReactiveGoogleMap = {
     }
   },
   render: function render() {
-    var _this3 = this;
-
     var h = arguments[0];
     return h(RMConnected, _mergeJSXProps([{
       "attrs": {
@@ -1633,14 +1711,12 @@ 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,
         "defaultQuery": this.defaultQuery,
-        "renderPopover": this.$scopedSlots.renderPopover ? function (item) {
-          return _this3.$scopedSlots.renderPopover(item);
-        } : null,
         "autoCenter": this.autoCenter,
         "defaultCenter": this.defaultCenter,
         "defaultRadius": this.defaultRadius,
@@ -1664,7 +1740,7 @@ ReactiveGoogleMap.install = function (Vue, options) {
     console.error('ReactiveSearch: map key is required to use ReactiveGoogleMap component');
   }
 
-  Vue.use(GmapMapFull, {
+  Vue.use(GmapVue, {
     load: {
       key: options.key,
       libraries: 'places'