@appbaseio/reactivesearch-vue 1.29.0 → 2.0.0-alpha

package/dist/es/ReactiveGoogleMap.js

@@ -0,0 +1,2327 @@
+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 'polished';
+import './Button-d8bc15ea.js';
+import { t as types } from './vueTypes-b8146772.js';
+import { P as Pagination } from './Pagination-784bf143.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 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;
+var isEqual = helper.isEqual,
+    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
+};
+var style = {
+  width: '100%',
+  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 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':
+      {
+        if (location.indexOf(',') > -1) {
+          var locationSplit = location.split(',');
+          return {
+            lat: parseFloat(locationSplit[0]),
+            lng: parseFloat(locationSplit[1])
+          };
+        }
+
+        var locationDecode = geohash.decode(location);
+        return {
+          lat: locationDecode.latitude,
+          lng: locationDecode.longitude
+        };
+      }
+
+    case 'array':
+      {
+        return {
+          lat: location[1],
+          lng: location[0]
+        };
+      }
+
+    default:
+      {
+        return location;
+      }
+  }
+}
+
+var ReactiveMap = {
+  name: 'ReactiveMap',
+  props: {
+    className: types.string,
+    componentId: types.stringRequired,
+    dataField: types.stringRequired,
+    react: types.react,
+    size: types.number,
+    sortBy: types.sortBy,
+    URLParams: VueTypes.bool,
+    autoCenter: VueTypes.bool,
+    getMapRef: VueTypes.func.isRequired,
+    center: types.location,
+    defaultCenter: types.location,
+    defaultPin: types.string,
+    defaultZoom: VueTypes.number.def(13),
+    defaultQuery: types.func,
+    innerClass: types.style,
+    loader: types.title,
+    render: types.func,
+    renderItem: types.func,
+    renderError: types.title,
+    pages: VueTypes.number.def(5),
+    currentPage: VueTypes.number.def(0),
+    pagination: VueTypes.bool,
+    showMarkers: VueTypes.bool,
+    defaultSearchAsMove: VueTypes.bool,
+    showSearchAsMove: VueTypes.bool,
+    defaultRadius: types.number,
+    unit: types.string,
+    autoClosePopover: VueTypes.bool,
+    renderMap: VueTypes.func.isRequired,
+    renderPopover: 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;
+
+    if (props.currentPage) {
+      currentPageState = Math.max(props.currentPage - 1, 0);
+    }
+
+    this.__state = {
+      from: currentPageState * props.size,
+      zoom: props.defaultZoom,
+      searchAsMove: props.defaultSearchAsMove,
+      currentPageState: currentPageState,
+      mapBoxBounds: null,
+      markersData: null
+    };
+    return this.__state;
+  },
+  computed: {
+    totalPages: function totalPages() {
+      return Math.ceil(this.total / this.$props.size) || 0;
+    },
+    stats: function stats() {
+      var _this$getAllData = this.getAllData(),
+          resultsToRender = _this$getAllData.resultsToRender;
+
+      return _extends({}, getResultStats(this), {
+        currentPage: this.currentPageState,
+        displayedResults: resultsToRender.length
+      });
+    },
+    hasCustomRender: function hasCustomRender() {
+      return hasCustomRenderer(this);
+    }
+  },
+  watch: {
+    defaultZoom: function defaultZoom(newVal) {
+      this.zoom = newVal;
+    },
+    currentPage: function currentPage(newVal, oldVal) {
+      if (oldVal !== newVal && newVal > 0 && newVal <= this.totalPages) {
+        this.setPage(newVal - 1);
+      }
+    },
+    defaultQuery: function defaultQuery(newVal, oldVal) {
+      if (!isQueryIdentical(newVal, oldVal, null, this.$props)) {
+        var options = getQueryOptions(this.$props);
+        options.from = 0;
+        this.$defaultQuery = newVal(null, this.$props);
+
+        var _ref = this.$defaultQuery || {},
+            sort = _ref.sort,
+            query = _ref.query;
+
+        if (sort) {
+          options.sort = this.$defaultQuery.sort;
+        }
+
+        var queryOptions = getOptionsFromQuery(this.$defaultQuery);
+
+        if (queryOptions) {
+          options = _extends({}, options, getOptionsFromQuery(this.$defaultQuery));
+        } // Update calculated default query in store
+
+
+        this.setQueryOptions(this.$props.componentId, options, false);
+        var persistMapQuery = true;
+        var forceExecute = true; // Update default query to include the geo bounding box query
+
+        this.setDefaultQueryForRSAPI();
+        var meta = {
+          mapBoxBounds: this.mapBoxBounds
+        };
+        this.setMapData(this.componentId, query, persistMapQuery, forceExecute, meta);
+        this.currentPageState = 0;
+        this.from = 0;
+      }
+    },
+    promotedResults: function promotedResults(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    hidden: function hidden(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    time: function time(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.$emit('data', this.getData());
+      }
+    },
+    hits: function hits(newVal, oldVal) {
+      this.$emit('data', this.getData());
+
+      if (this.pagination) {
+        // called when page is changed
+        if (this.isLoading && (oldVal || newVal)) {
+          this.$emit('page-change', this.currentPageState + 1, this.totalPages);
+        }
+      }
+    },
+    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());
+      }
+    },
+    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 forceExecute = true;
+        var geoQuery = this.getGeoQuery(this.$props); // Update default query for RS API
+
+        this.setDefaultQueryForRSAPI();
+        var meta = {
+          mapBoxBounds: this.mapBoxBounds
+        };
+        this.setMapData(this.componentId, geoQuery, persistMapQuery, forceExecute, meta);
+      }
+    }
+  },
+  methods: {
+    parseLocation: function parseLocation(location) {
+      if (Array.isArray(location)) {
+        return {
+          lat: Number(location[0]),
+          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
+      };
+    },
+    getDefaultCenter: function getDefaultCenter() {
+      if (this.defaultCenter) return this.parseLocation(this.defaultCenter);
+      return this.parseLocation(MAP_CENTER);
+    },
+    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;
+        updatedHits = [].concat(updatedHits, [updatedItem]);
+        hitMap[key] = count + 1;
+      });
+      return updatedHits;
+    },
+    getPosition: function getPosition(result) {
+      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;
+        var Y = 0.0;
+        var Z = 0.0;
+        data.forEach(function (location) {
+          if (location) {
+            var _lat = 0.0;
+            var _lng = 0.0;
+            var locationObj = getLocationObject(location);
+            _lat = locationObj.lat * Math.PI / 180;
+            _lng = (locationObj.lng !== undefined ? locationObj.lng : locationObj.lon) * Math.PI / 180;
+            var a = Math.cos(_lat) * Math.cos(_lng);
+            var b = Math.cos(_lat) * Math.sin(_lng);
+            var c = Math.sin(_lat);
+            X += a;
+            Y += b;
+            Z += c;
+          }
+        });
+        X /= numCoords;
+        Y /= numCoords;
+        Z /= numCoords;
+        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;
+        var newY = lng * 180 / Math.PI;
+        return {
+          lat: newX,
+          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 () {
+          _this4.$options.preserveCenter = false;
+        }, 100);
+        return this.parseLocation({
+          lat: currentCenter.lat(),
+          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;
+          this.setGeoQuery(true);
+        } else {
+          this.zoom = zoom;
+        }
+
+        if (prevZoom !== zoom) {
+          this.$emit('zoom-changed', zoom);
+        }
+      }
+    },
+    handleOnDragEnd: function handleOnDragEnd() {
+      if (this.searchAsMove) {
+        this.$options.preserveCenter = true;
+        this.setGeoQuery(true);
+      }
+
+      this.$emit('drag-end');
+    },
+    handlePreserveCenter: function handlePreserveCenter(preserveCenter) {
+      this.$options.preserveCenter = preserveCenter;
+    },
+    handleOnIdle: function handleOnIdle() {
+      // only make the geo_bounding query if we have hits data
+      if (this.hits && this.hits.length && this.searchAsMove) {
+        // always execute geo-bounds query when center is set
+        // to improve the specificity of search results
+        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) {
+        this.$defaultQuery = this.getGeoQuery();
+        var persistMapQuery = !!this.center;
+        var forceExecute = this.searchAsMove;
+        var meta = {
+          mapBoxBounds: this.mapBoxBounds
+        };
+        this.setMapData(this.componentId, this.$defaultQuery, persistMapQuery, forceExecute, meta);
+      }
+
+      this.skipBoundingBox = false;
+    },
+    getMapParams: function getMapParams() {
+      var _this$getData = this.getData(),
+          data = _this$getData.data;
+
+      var showMarkers = this.showMarkers,
+          defaultPin = this.defaultPin,
+          renderPopover = this.renderPopover,
+          autoClosePopover = this.autoClosePopover,
+          renderItem = this.renderItem;
+      return {
+        resultsToRender: data,
+        center: this.getCenter(data),
+        getPosition: this.getPosition,
+        zoom: this.zoom,
+        renderItem: renderItem,
+        showMarkers: showMarkers,
+        defaultPin: defaultPin,
+        renderPopover: renderPopover,
+        autoClosePopover: autoClosePopover,
+        renderSearchAsMove: this.renderSearchAsMove,
+        handlePreserveCenter: this.handlePreserveCenter,
+        preserveCenter: this.$options.preserveCenter,
+        handleOnDragEnd: this.handleOnDragEnd,
+        handleOnIdle: this.handleOnIdle,
+        handleZoomChange: this.handleZoomChange
+      };
+    },
+    getAllData: function getAllData() {
+      var size = this.size,
+          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,
+        customData: customData || {},
+        promotedResults: parsedPromotedResults,
+        loadMore: this.loadMore,
+        base: base,
+        triggerClickAnalytics: this.triggerClickAnalytics
+      };
+    },
+    getData: function getData() {
+      var _this$getAllData2 = this.getAllData(),
+          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 || []),
+        promotedData: this.withClickIds(promotedResults),
+        rawData: this.rawData,
+        resultStats: this.stats,
+        customData: customData
+      };
+    },
+    getComponent: function getComponent$1() {
+      var error = this.error,
+          isLoading = this.isLoading;
+
+      var data = _extends({
+        error: error,
+        loading: isLoading,
+        loadMore: this.loadMore,
+        triggerClickAnalytics: this.triggerClickAnalytics,
+        setPage: this.setPage
+      }, this.getData());
+
+      return getComponent(data, this);
+    },
+    setPage: function setPage(page) {
+      // pageClick will be called every time a pagination button is clicked
+      if (page !== this.currentPageState) {
+        this.$emit('pageClick', page + 1);
+        this.$emit('page-click', page + 1);
+        var value = this.size * page;
+        var options = getQueryOptions(this.$props);
+        options.from = this.$data.from;
+        this.from = value;
+        this.currentPageState = page;
+        this.loadMoreAction(this.componentId, _extends({}, options, {
+          from: value
+        }), false);
+
+        if (this.URLParams) {
+          this.setPageURL(this.componentId, page + 1, this.componentId, false, true);
+        }
+      }
+    },
+    setDefaultQueryForRSAPI: function setDefaultQueryForRSAPI() {
+      if (this.defaultQuery && typeof this.defaultQuery === 'function') {
+        var defaultQuery = this.defaultQuery();
+        this.setDefaultQuery(this.componentId, defaultQuery);
+      }
+    },
+    getArrPosition: function getArrPosition(location) {
+      return {
+        lat: location.lat,
+        lon: location.lon || location.lng
+      };
+    },
+    getGeoQuery: function getGeoQuery(props) {
+      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;
+      var north;
+      var south;
+      var east;
+      var west;
+
+      if (mapBounds) {
+        var _geo_bounding_box;
+
+        north = mapBounds.getNorthEast().lat();
+        south = mapBounds.getSouthWest().lat();
+        east = mapBounds.getNorthEast().lng();
+        west = mapBounds.getSouthWest().lng();
+        var boundingBoxCoordinates = {
+          top_left: [west, north],
+          bottom_right: [east, south]
+        };
+        this.mapBoxBounds = boundingBoxCoordinates;
+        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;
+
+          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 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 {
+          geo_distance: (_geo_distance = {
+            distance: "" + this.defaultRadius + this.unit
+          }, _geo_distance[this.dataField] = this.getArrPosition(center), _geo_distance)
+        };
+      }
+
+      return null;
+    },
+    loadMore: function loadMore() {
+      if (this.hits && !this.pagination && this.total !== this.hits.length) {
+        var value = this.from + this.size;
+        var options = getQueryOptions(this.$props);
+        this.from = value;
+        this.loadMoreAction(this.componentId, _extends({}, options, {
+          from: value
+        }), true);
+      }
+    },
+    triggerClickAnalytics: function triggerClickAnalytics(searchPosition, documentId) {
+      var docId = documentId;
+
+      if (!docId) {
+        var _this$getData2 = this.getData(),
+            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;
+
+      return results.map(function (result, index) {
+        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;
+
+      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", {
+          "style": {
+            position: 'absolute',
+            bottom: '30px',
+            left: '10px',
+            width: '240px',
+            backgroundColor: '#fff',
+            padding: '8px 10px',
+            boxShadow: 'rgba(0,0,0,0.3) 0px 1px 4px -1px',
+            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
+          },
+          "class": getClassName(this.$props.innerClass, 'checkbox'),
+          "on": {
+            "click": this.toggleSearchAsMove
+          }
+        }), h("label", {
+          "attrs": {
+            "className": getClassName(this.innerClass, 'label') || null,
+            "for": this.$props.componentId + "-searchasmove"
+          }
+        }, [this.searchAsMoveLabel])]);
+      }
+
+      return null;
+    },
+    renderPagination: function renderPagination() {
+      var h = this.$createElement;
+      return h(Pagination, {
+        "attrs": {
+          "pages": this.pages,
+          "totalPages": this.totalPages,
+          "currentPage": this.currentPageState,
+          "setPage": this.setPage,
+          "innerClass": this.innerClass
+        }
+      });
+    }
+  },
+  created: function created() {
+    if (this.defaultPage >= 0) {
+      this.currentPageState = this.defaultPage;
+      this.from = this.currentPageState * this.$props.size;
+    }
+
+    this.internalComponent = this.$props.componentId + "__internal";
+    this.updateComponentProps(this.componentId, {
+      from: this.from
+    }, componentTypes.reactiveMap);
+    this.updateComponentProps(this.internalComponent, {
+      from: this.from
+    }, componentTypes.reactiveMap);
+  },
+  mounted: function mounted() {
+    if (this.defaultPage < 0 && this.currentPage > 0) {
+      if (this.$props.URLParams) {
+        this.setPageURL(this.$props.componentId, this.currentPage, this.$props.componentId, false, true);
+      }
+    }
+
+    var options = getQueryOptions(this.$props);
+    options.from = this.$data.from;
+
+    if (this.$props.sortBy) {
+      var _ref2;
+
+      options.sort = [(_ref2 = {}, _ref2[this.$props.dataField] = {
+        order: this.$props.sortBy
+      }, _ref2)];
+    }
+
+    this.$defaultQuery = null;
+
+    if (this.$props.defaultQuery) {
+      this.$defaultQuery = this.$props.defaultQuery();
+      options = _extends({}, options, getOptionsFromQuery(this.$defaultQuery)); // Override sort query with defaultQuery's sort if defined
+
+      if (this.$defaultQuery.sort) {
+        options.sort = this.$defaultQuery.sort;
+      } // since we want defaultQuery to be executed anytime
+      // map component's query is being executed
+
+
+      var persistMapQuery = true; // no need to forceExecute because setReact() will capture the main query
+      // and execute the defaultQuery along with it
+
+      var forceExecute = false; // Update default query for RS API
+
+      this.setDefaultQueryForRSAPI();
+      var meta = {
+        mapBoxBounds: this.mapBoxBounds
+      };
+      this.setMapData(this.componentId, this.$defaultQuery.query, persistMapQuery, forceExecute, meta);
+    } else {
+      // only apply geo-distance when defaultQuery prop is not set
+      var query = this.getGeoDistanceQuery();
+
+      if (query) {
+        // - only persist the map query if center prop is set
+        // - ideally, persist the map query if you want to keep executing it
+        //   whenever there is a change (due to subscription) in the component query
+        var _persistMapQuery = !!this.center; // - forceExecute will make sure that the component query + Map query gets executed
+        //   irrespective of the changes in the component query
+        // - forceExecute will only come into play when searchAsMove is true
+        // - kindly note that forceExecute may result in one additional network request
+        //   since it bypasses the gatekeeping
+
+
+        var _forceExecute = this.searchAsMove; // Set meta for `distance` and `coordinates` in selected value
+
+        var center = this.center || this.defaultCenter;
+        var coordinatesObject = this.getArrPosition(center);
+        var _meta = {
+          distance: this.defaultRadius,
+          coordinates: coordinatesObject.lat + ", " + coordinatesObject.lon
+        };
+        this.setMapData(this.componentId, query, _persistMapQuery, _forceExecute, _meta);
+      }
+    }
+
+    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", {
+      "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,
+    error: state.error[props.componentId],
+    isLoading: state.isLoading[props.componentId],
+    hits: state.hits[props.componentId] && state.hits[props.componentId].hits,
+    promotedResults: state.promotedResults[props.componentId],
+    customData: state.customData[props.componentId],
+    total: state.hits[props.componentId] && state.hits[props.componentId].total,
+    time: state.hits[props.componentId] && state.hits[props.componentId].time,
+    rawData: state.rawData[props.componentId],
+    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden
+  };
+};
+
+var mapDispatchToProps = {
+  loadMoreAction: loadMore,
+  setPageURL: setValue,
+  setQueryOptions: setQueryOptions,
+  setStreaming: setStreaming,
+  updateQuery: updateQuery,
+  updateComponentProps: updateComponentProps,
+  setDefaultQuery: setDefaultQuery,
+  recordResultClick: recordResultClick,
+  setMapData: setMapData
+};
+var RMConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(ReactiveMap), {
+  componentType: componentTypes.reactiveMap,
+  internalComponent: true
+});
+
+ReactiveMap.install = function (Vue) {
+  Vue.component(ReactiveMap.name, RMConnected);
+}; // Add componentType for SSR
+
+
+ReactiveMap.componentType = componentTypes.reactiveMap;
+
+var infoWindowMappedProps = {
+  content: {
+    type: Object,
+    twoWay: true
+  },
+  options: {
+    type: Object,
+    required: false,
+    "default": function _default() {
+      return {};
+    }
+  },
+  position: {
+    type: Object,
+    twoWay: true
+  },
+  zIndex: {
+    type: Number,
+    twoWay: true
+  }
+};
+/**
+ * This function helps you to bind events from Google Maps API to Vue events
+ *
+ * @param  {Object} vueInst the Vue instance
+ * @param  {Object} googleMapsInst the Google Maps instance
+ * @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]) {
+      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
+ *
+ * @param  {Object} vueInst the Vue component instance
+ * @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
+ * and the individual values are watched.
+ *
+ * In effect, it throttles the multiple $watch to execute at most once per tick.
+ *
+ * @param  {Object} vueInst the component instance
+ * @param  {string[]} propertiesToTrack string array with all properties that you want to track
+ * @param  {Function} handler function to be fired when the prop change
+ * @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;
+      vueInst.$nextTick(function () {
+        isHandled = false;
+        handler();
+      });
+    }
+  }
+
+  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
+ * of the object (e.g. the lat and lng of a LatLng), then we do a deep
+ * watch. For deep watch, we also prevent the _changed event from being
+ * emitted if the data source was external.
+ *
+ * @param  {Object} vueInst the component instance
+ * @param  {Object} googleMapsInst the Google Maps instance
+ * @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;
+
+    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
+      // 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 () {
+          var attributeValue = vueInst[attribute];
+          googleMapsInst[setMethodName](attributeValue);
+        }, {
+          immediate: typeof initialValue !== 'undefined',
+          deep: type === Object
+        });
+      } else {
+        watchPrimitiveProperties(vueInst, trackProperties.map(function (prop) {
+          return attribute + "." + prop;
+        }), function () {
+          googleMapsInst[setMethodName](vueInst[attribute]);
+        }, vueInst[attribute] !== undefined);
+      }
+
+      if (twoWay && (vueInst.$gmapOptions.autoBindAllEvents || vueInst.$listeners[eventName])) {
+        googleMapsInst.addListener(eventName, function () {
+          vueInst.$emit(eventName, googleMapsInst[getMethodName]());
+        });
+      }
+    }
+  });
+}
+
+var _excluded = ["options", "position"];
+var InfoWindowClusterManager = {
+  name: 'InfoWindowClusterManager',
+  inject: {
+    $markerPromise: {
+      "default": null
+    },
+    $mapPromise: {}
+  },
+  provide: function provide() {
+    var _this = this;
+
+    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
+
+      var initialOptions = _extends({}, _this.options, {
+        map: map
+      }, getPropsValues(_this, infoWindowMappedProps));
+
+      var extraOptions = initialOptions.options,
+          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.$infoWindowObject = new google.maps.InfoWindow(finalOptions);
+          bindProps(_this, _this.$infoWindowObject, infoWindowMappedProps);
+          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
+
+    this.$infoWindowPromise = promise;
+    return {
+      $infoWindowPromise: promise
+    };
+  },
+  props: {
+    /**
+     * NOTE: This prop overrides the content of the default slot, use only one of them, not both at the same time
+     * Content to display in the InfoWindow. This can be an HTML element, a plain-text string, or a string containing HTML. The InfoWindow will be sized according to the content. To set an explicit size for the content, set content to be a HTML element with that size.
+     * @value undefined
+     * @see [InfoWindow content](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions.content)
+     */
+    content: {
+      type: [String, Object],
+      "default": undefined
+    },
+
+    /**
+     * Determines if the info-window is open or not
+     */
+    opened: {
+      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
+     * (in which case its position is based on the marker's location)
+     * or on the map itself at a specified LatLng.
+     *
+     * The LatLng at which to display this InfoWindow. If the InfoWindow is opened with an anchor, the anchor's position will be used instead.
+     * @value undefined
+     * @type LatLng|LatLngLiteral
+     * @see [InfoWindow position](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions.position)
+     */
+    position: {
+      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
+     * @see [InfoWindow position](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions.zIndex)
+     */
+    zIndex: {
+      type: Number,
+      "default": 0
+    },
+
+    /**
+     * Extra options that you want to pass to the component
+     */
+    options: {
+      type: Object,
+      required: false,
+      "default": undefined
+    }
+  },
+  mounted: function mounted() {
+    var el = this.$refs.flyaway;
+    el.parentNode.removeChild(el);
+  },
+  destroyed: function destroyed() {
+    // Note: not all Google Maps components support maps
+    if (this.$infoWindowObject && this.$infoWindowObject.setMap) {
+      this.$infoWindowObject.setMap(null);
+    }
+  },
+  methods: {
+    // TODO: we need to analyze the following method name
+    // eslint-disable-next-line no-underscore-dangle -- old code
+    _openInfoWindow: function _openInfoWindow() {
+      if (this.opened) {
+        if (this.$markerObject !== null) {
+          this.$infoWindowObject.open(this.$map, this.$markerObject);
+        } else {
+          this.$infoWindowObject.open(this.$map);
+        }
+      } else {
+        this.$infoWindowObject.close();
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", [h("div", {
+      "ref": "flyaway"
+    }, [this.$scopedSlots["default"]()])]);
+  }
+};
+
+var InfoWindowWrapper = {
+  name: 'InfoWindowWrapperClusterManager',
+  props: {
+    id: VueTypes.string,
+    renderPopover: VueTypes.func,
+    infoWindowProps: VueTypes.object,
+    events: VueTypes.object,
+    marker: VueTypes.Object
+  },
+  data: function data() {
+    return {
+      infoWindowRef: null
+    };
+  },
+  provide: function provide() {
+    return {
+      $markerPromise: Promise.resolve(this.marker)
+    };
+  },
+  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(InfoWindowClusterManager, {
+      "ref": this.id + "-Info-Window",
+      "props": _extends({}, this.infoWindowProps),
+      "on": _extends({}, events)
+    }, [h("div", [renderPopover(this.handleClose)])]);
+  }
+};
+
+var _excluded$1 = ["options"];
+var isEqual$1 = helper.isEqual;
+var recordResultClick$1 = Actions.recordResultClick;
+var ClusterMarkers = {
+  name: 'ClusterMarkers',
+  props: {
+    markers: VueTypes.array,
+    getPosition: VueTypes.func,
+    defaultPin: VueTypes.string,
+    renderItem: VueTypes.func,
+    markerProps: VueTypes.object,
+    handlePreserveCenter: VueTypes.func.isRequired,
+    autoClosePopover: VueTypes.bool,
+    renderPopover: VueTypes.func,
+    highlightMarkerOnHover: VueTypes.bool
+  },
+  inject: {
+    $clusterPromise: {
+      "default": null
+    },
+    $mapPromise: {}
+  },
+  data: function data() {
+    return {
+      openMarkers: {}
+    };
+  },
+  mounted: function mounted() {
+    this.buildMarkers(this.markers);
+  },
+  destroy: function destroy() {
+    // Remove active markers
+    this.buildMarkers([]);
+  },
+  watch: {
+    markers: function markers(newVal, oldVal) {
+      if (!isEqual$1(oldVal, newVal)) {
+        this.buildMarkers(newVal);
+      }
+    }
+  },
+  methods: {
+    triggerAnalytics: function triggerAnalytics(clickPosition, markerId) {
+      this.recordResultClick(clickPosition, markerId);
+    },
+    setOpenMarkers: function setOpenMarkers(openMarkers) {
+      this.openMarkers = openMarkers;
+    },
+    closeMarker: function closeMarker(marker) {
+      var _this$$props = this.$props,
+          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));
+
+      var newOpenMarkers = autoClosePopover ? {} : activeMarkers;
+      this.setOpenMarkers(newOpenMarkers);
+      handlePreserveCenter(true);
+      this.$emit('close-marker-popover', marker);
+    },
+    openMarker: function openMarker(marker, index) {
+      var _ref, _extends2;
+
+      var autoClosePopover = this.autoClosePopover,
+          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);
+    },
+    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
+            // `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
+
+            markersToRender.forEach(function (marker, index) {
+              // Avoid if a marker is already rendered
+              if (marker._id && oldMarkersIdMap[marker._id] !== undefined) {
+                // Set old marker as active
+                oldMarkersIdMap[marker._id] = true;
+              } else {
+                // Initialize the maps with the given options
+                var initialOptions = _extends({}, _this.markerProps, {
+                  metaData: marker,
+                  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;
+                  }
+                } else if (_this.defaultPin) {
+                  initialOptions.icon = {
+                    url: _this.defaultPin
+                  };
+                }
+
+                var extraOptions = initialOptions.options,
+                    finalOptions = _objectWithoutPropertiesLoose(initialOptions, _excluded$1);
+
+                if (_this.$clusterPromise) {
+                  finalOptions.map = null;
+                } // 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
+
+            var currentMarkers = [];
+            markersToAdd.forEach(function (marker) {
+              currentMarkers.push(marker);
+            });
+            (_this.$markers || []).forEach(function (marker) {
+              if (marker.metaData && marker.metaData._id) {
+                // if maker is not active then add to remove list
+                if (!oldMarkersIdMap[marker.metaData._id]) {
+                  markersToRemove.push(marker);
+                } else {
+                  currentMarkers.push(marker);
+                }
+              }
+            }); // Remove old markers
+
+            clusterObject.removeMarkers(markersToRemove); // Add inital markers at once
+
+            clusterObject.addMarkers(markersToAdd);
+            _this.$clusterObject = clusterObject;
+            _this.$map = map;
+            _this.$markers = currentMarkers;
+          });
+        }
+      })["catch"](function (error) {
+        throw error;
+      });
+    }
+  },
+  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) {
+      var marker = _this2.openMarkers[markerId];
+      var item = marker.metaData;
+      return h(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);
+            }
+          }
+        }
+      });
+    })]);
+  }
+};
+var mapDispatchToProps$1 = {
+  recordResultClick: recordResultClick$1
+};
+var ClusterManager = connect(function () {
+  return null;
+}, mapDispatchToProps$1)(ClusterMarkers);
+
+var InfoWindow = components.InfoWindow;
+var InfoWindowWrapper$1 = {
+  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
+    },
+    offsetX: {
+      type: Number,
+      "default": 0
+    },
+    offsetY: {
+      type: Number,
+      "default": 0
+    },
+    alignment: {
+      type: String,
+      "default": 'top'
+    },
+    zIndex: {
+      type: Number,
+      "default": 50
+    },
+    cssPosition: {
+      type: Boolean,
+      "default": false
+    },
+    renderMarker: VueTypes.func.isRequired,
+    handleMouseOver: VueTypes.func,
+    handleFocus: VueTypes.func,
+    handleMouseOut: VueTypes.func,
+    handleBlur: VueTypes.func,
+    handleClick: VueTypes.func
+  },
+  data: function data() {
+    return {
+      opacity: 0.01
+    };
+  },
+  mixins: [MapElementMixin],
+  inject: {
+    $clusterPromise: {
+      "default": null
+    }
+  },
+  computed: {
+    lat: function lat() {
+      return parseFloat(Number.isNaN(this.marker.lat) ? this.marker.latitude : this.marker.lat);
+    },
+    lng: function lng() {
+      return parseFloat(Number.isNaN(this.marker.lng) ? this.marker.longitude : this.marker.lng);
+    },
+    latLng: function latLng() {
+      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();
+      });
+    },
+    zIndex: function zIndex() {
+      if (this.$overlay) {
+        this.$overlay.repaint();
+      }
+    }
+  },
+  beforeCreate: function beforeCreate(options) {
+    if (this.$clusterPromise) {
+      // eslint-disable-next-line
+      options.map = null;
+    }
+
+    return this.$clusterPromise;
+  },
+  destroyed: function destroyed() {
+    if (this.$clusterObject) {
+      this.$clusterObject.removeMarker(this.$overlay, true);
+    } else if (this.$overlay) {
+      this.$overlay.setMap(null);
+      this.$overlay = undefined;
+    }
+  },
+  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);
+          } else if (this.$overlay) {
+            this.$overlay.setMap(null);
+            this.$overlay = undefined;
+          }
+
+          var div = self.$el;
+          var panes = this.getPanes();
+          div.style.position = 'absolute';
+          div.style.display = 'inline-block';
+          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
+        ;
+
+        _proto.onRemove = function onRemove() {
+          if (self.$el) {
+            var ua = window.navigator.userAgent;
+            var msie = ua.indexOf('MSIE '); // eslint-disable-next-line
+
+            if (msie > 0 || !!ua.match(/Trident.*rv\:11\./)) {
+              self.$el.parentNode.removeChild(self.$el);
+            } else {
+              self.$el.remove();
+            }
+          }
+        };
+
+        return Overlay;
+      }(window.google.maps.OverlayView);
+
+      _this2.$overlay = new Overlay(map);
+      setTimeout(function () {
+        if (_this2.$overlay) {
+          _this2.$overlay.repaint();
+
+          _this2.opacity = 1;
+        }
+      }, 100);
+    });
+  },
+  methods: {
+    afterCreate: function afterCreate(inst) {
+      var _this4 = this;
+
+      if (this.$clusterPromise && !this.isMarkerAdded) {
+        this.$clusterPromise.then(function (co) {
+          co.addMarker(inst);
+          _this4.$clusterObject = co;
+          _this4.isMarkerAdded = true;
+        });
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "style": {
+        opacity: this.opacity
+      },
+      "on": {
+        "mouseover": this.handleMouseOver,
+        "mouseout": this.handleMouseOut,
+        "click": this.handleClick
+      }
+    }, [this.renderMarker()]);
+  }
+};
+
+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$2 = Actions.recordResultClick;
+var GoogleMapMarker = {
+  name: 'GoogleMapMarker',
+  props: {
+    index: VueTypes.number,
+    marker: VueTypes.object.isRequired,
+    getPosition: VueTypes.func.isRequired,
+    defaultPin: VueTypes.string,
+    renderItem: VueTypes.func,
+    setOpenMarkers: VueTypes.func.isRequired,
+    handlePreserveCenter: VueTypes.func.isRequired,
+    autoClosePopover: VueTypes.bool,
+    openMarkers: VueTypes.object,
+    renderPopover: VueTypes.func,
+    highlightMarkerOnHover: VueTypes.bool
+  },
+  data: function data() {
+    return {
+      zIndex: 0,
+      markerIcon: null
+    };
+  },
+  methods: {
+    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;
+      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();
+      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;
+      var id = marker._id;
+
+      var del = openMarkers[id],
+          activeMarkers = _objectWithoutPropertiesLoose(openMarkers, [id].map(_toPropertyKey));
+
+      var newOpenMarkers = autoClosePopover ? {} : activeMarkers;
+      handleOpenMarkers(newOpenMarkers);
+      handlePreserveCenter(true);
+      this.$emit('close-marker-popover', marker);
+    },
+    triggerAnalytics: function triggerAnalytics() {
+      this.recordResultClick(this.index, this.marker._id);
+    },
+    renderPopoverClick: function renderPopoverClick(item, includeExternalSettings) {
+      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)
+          }
+        };
+      }
+
+      if (item._id in openMarkers) {
+        return h(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();
+              }
+            }
+          }
+        });
+      }
+
+      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;
+    var markerProps = {};
+
+    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,
+            "handleMouseOut": this.removeMarkerZIndex,
+            "handleClick": this.openMarker,
+            "zIndex": markerProps.zIndex,
+            "renderMarker": function renderMarker() {
+              return h("div", {
+                "attrs": {
+                  "css": mapPinWrapper
+                }
+              }, [h(MapPin, [data.label]), h(MapPinArrow), renderPopover ? _this2.renderPopoverClick(marker, true) : null]);
+            }
+          },
+          "props": _extends({}, customMarkerProps)
+        });
+      }
+
+      if ('icon' in data) {
+        markerProps.icon = data.icon;
+      } else {
+        return h(MarkerWithLabel, {
+          "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)
+        });
+      }
+    } else if (defaultPin) {
+      markerProps.icon = {
+        url: defaultPin
+      };
+    }
+
+    return h(Marker, {
+      "key": marker._id,
+      "attrs": {
+        "zIndex": markerProps.zIndex,
+        "position": getPosition(marker),
+        "options": {
+          metaData: marker
+        },
+        "icon": this.markerIcon || markerProps.icon
+      },
+      "on": {
+        "click": function click() {
+          return _this2.openMarker();
+        },
+        "mouseover": this.increaseMarkerZIndex,
+        "mouseout": this.removeMarkerZIndex
+      },
+      "props": _extends({}, customMarkerProps)
+    }, [renderPopover ? this.renderPopoverClick(marker) : null]);
+  }
+};
+var mapDispatchToProps$2 = {
+  recordResultClick: recordResultClick$2
+};
+var GoogleMapMarker$1 = connect(function () {
+  return null;
+}, mapDispatchToProps$2)(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,
+    clusterProps: VueTypes.object,
+    showMarkerClusters: VueTypes.bool,
+    highlightMarkerOnHover: VueTypes.bool
+  },
+  data: function data() {
+    return {
+      openMarkers: {},
+      clickedCluster: null,
+      clusterMarkers: []
+    };
+  },
+  methods: {
+    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 openMarkers = this.openMarkers;
+    var markerProps = {
+      openMarkers: openMarkers,
+      setMarkerOnTop: this.setMarkerOnTop,
+      setOpenMarkers: this.setOpenMarkers,
+      getPosition: this.getPosition,
+      renderItem: this.renderItem,
+      defaultPin: this.defaultPin,
+      autoClosePopover: this.autoClosePopover,
+      handlePreserveCenter: this.handlePreserveCenter,
+      renderPopover: this.renderPopover,
+      markerProps: this.markerProps,
+      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);
+          }
+        },
+        "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
+        },
+        "on": _extends({}, this.$listeners)
+      })]), this.clickedCluster && this.renderClusterPopover ? h(InfoWindowWrapper$1, {
+        "attrs": {
+          "id": "cluster",
+          "infoWindowProps": {
+            zIndex: 500,
+            position: this.getAdditionalProps().position,
+            options: this.getAdditionalProps().defaultOptions
+          },
+          "renderPopover": function renderPopover(_handleClose) {
+            return _this.renderClusterPopover({
+              markers: _this.clusterMarkers,
+              cluster: _this.clickedCluster,
+              handleClose: function handleClose() {
+                _handleClose();
+
+                _this.closeMarker();
+              }
+            });
+          },
+          "events": {
+            closeclick: this.closeMarker
+          }
+        }
+      }) : null]);
+    }
+
+    return h("div", [resultsToRender.map(function (marker, index) {
+      return h(GoogleMapMarker$1, {
+        "attrs": {
+          "index": index,
+          "marker": marker
+        },
+        "props": _extends({}, markerProps),
+        "on": _extends({}, _this.$listeners)
+      });
+    })]);
+  }
+};
+
+var Map = components.MapLayer;
+var ReactiveGoogleMap = {
+  name: 'ReactiveGoogleMap',
+  props: {
+    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: VueTypes.bool,
+    mapProps: VueTypes.object,
+    showMarkers: VueTypes.bool.def(true),
+    showMarkerClusters: VueTypes.bool.def(false),
+    searchAsMove: VueTypes.bool.def(false),
+    searchAsMoveLabel: VueTypes.string,
+    markerProps: VueTypes.object,
+    clusterProps: VueTypes.object,
+    renderItem: VueTypes.func,
+    showSearchAsMove: VueTypes.bool.def(true),
+    autoClosePopover: VueTypes.bool,
+    pagination: VueTypes.bool,
+    defaultPin: VueTypes.string,
+    autoCenter: VueTypes.bool,
+    defaultCenter: types.location,
+    center: types.location,
+    defaultRadius: types.number,
+    unit: types.string,
+    pages: VueTypes.number.def(5),
+    calculateMarkers: VueTypes.func,
+    highlightMarkerOnHover: VueTypes.bool.def(true)
+  },
+  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;
+      var style = {
+        width: '100%',
+        height: '100%',
+        position: 'relative'
+      };
+      return h("div", {
+        "style": style
+      }, [h(Map, {
+        "ref": "mapRef",
+        "attrs": {
+          "map-type-id": "terrain",
+          "options": {
+            zoomControl: true
+          },
+          "center": center,
+          "zoom": zoom
+        },
+        "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
+        },
+        "on": _extends({}, this.$listeners)
+      }) : null]), renderSearchAsMove()]);
+    },
+    getMapRef: function getMapRef() {
+      return this.mapRef;
+    }
+  },
+  mounted: function mounted() {
+    var _this2 = this;
+
+    if (this.$refs.mapRef) {
+      this.$refs.mapRef.$mapPromise.then(function (map) {
+        _this2.mapRef = map;
+      });
+    }
+  },
+  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
+      }
+    }, {
+      scopedSlots: this.$scopedSlots,
+      on: this.$listeners
+    }]));
+  }
+};
+
+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, {
+    load: {
+      key: options.key,
+      libraries: 'places'
+    },
+    installComponents: false
+  });
+}; // Add componentType for SSR
+
+
+ReactiveGoogleMap.componentType = componentTypes.reactiveMap;
+
+export default ReactiveGoogleMap;