@appbaseio/reactivesearch-vue 1.16.0-alpha.34 → 1.16.0-alpha.37

package/dist/es/ReactiveGoogleMap.js

@@ -0,0 +1,1756 @@
+import { Actions, helper } from '@appbaseio/reactivecore';
+import { a as _extends, d as _inheritsLoose, _ as _taggedTemplateLiteralLoose, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-ecf6c03c.js';
+import VueTypes from 'vue-types';
+import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
+import 'emotion';
+import styled, { css } from '@appbaseio/vue-emotion';
+import 'polished';
+import './Button-799185e2.js';
+import { t as types } from './vueTypes-9326e0be.js';
+import { P as Pagination } from './Pagination-b3e4054a.js';
+import '@appbaseio/reactivecore/lib/utils/transform';
+import 'redux';
+import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, a as isFunction, c as connect } from './index-5daa8276.js';
+import { C as ComponentWrapper } from './ComponentWrapper-bbb717bc.js';
+import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
+import { C as Checkbox } from './FormControlList-fe389a2e.js';
+import * as GmapMapFull from 'gmap-vue';
+import Map from 'gmap-vue/dist/components-implementation/map';
+import geohash from 'ngeohash';
+import GmapCluster from 'gmap-vue/dist/components/cluster';
+import InfoWindow from 'gmap-vue/dist/components-implementation/info-window';
+import Marker from 'gmap-vue/dist/components/marker';
+import MapElementMixin from 'gmap-vue/dist/mixins/map-element';
+
+var setStreaming = Actions.setStreaming,
+    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 InfoWindowWrapper = {
+  name: 'InfoWindowWrapper',
+  props: {
+    id: VueTypes.string,
+    renderPopover: VueTypes.func,
+    infoWindowProps: VueTypes.object,
+    events: VueTypes.object
+  },
+  data: function data() {
+    return {
+      infoWindowRef: null
+    };
+  },
+  mounted: function mounted() {
+    this.infoWindowRef = this.$refs[this.id + "-Info-Window"];
+  },
+  methods: {
+    handleClose: function handleClose() {
+      this.infoWindowRef.$infoWindowObject.close();
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    var renderPopover = this.renderPopover,
+        events = this.events;
+    return h(InfoWindow, {
+      "ref": this.id + "-Info-Window",
+      "props": _extends({}, this.infoWindowProps),
+      "on": _extends({}, events)
+    }, [h("div", [renderPopover(this.handleClose)])]);
+  }
+};
+
+var MarkerWithLabel = {
+  name: 'MarkerWithLabel',
+  props: {
+    metaData: {
+      type: Object,
+      "default": undefined
+    },
+    marker: {
+      type: Object,
+      "default": undefined
+    },
+    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();
+          };
+
+          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 recordResultClick$1 = 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, {
+          "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$1 = {
+  recordResultClick: recordResultClick$1
+};
+var GoogleMapMarker$1 = connect(function () {
+  return null;
+}, mapDispatchToProps$1)(GoogleMapMarker);
+
+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;
+    },
+    getClusterMarkers: function getClusterMarkers() {
+      if (this.clickedCluster && Array.isArray(this.clickedCluster.getMarkers())) {
+        return this.clickedCluster.getMarkers().map(function (marker) {
+          return marker.metaData;
+        });
+      }
+
+      return [];
+    },
+    getAdditionalProps: function getAdditionalProps() {
+      return {
+        position: {
+          lat: this.clickedCluster.getCenter().lat(),
+          lng: this.clickedCluster.getCenter().lng()
+        },
+        defaultOptions: {
+          pixelOffset: new window.google.maps.Size(0, -30)
+        }
+      };
+    },
+    closeMarker: function closeMarker() {
+      this.clickedCluster = null;
+      this.clusterMarkers = [];
+      this.$emit('close-cluster-popover');
+    }
+  },
+  render: function render() {
+    var _this = this;
+
+    var h = arguments[0];
+    var resultsToRender = this.$props.resultsToRender;
+    var 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(GmapCluster, {
+        "props": _extends({}, this.clusterProps),
+        "on": {
+          "click": function click(cluster) {
+            _this.clickedCluster = cluster;
+            _this.clusterMarkers = _this.getClusterMarkers();
+
+            _this.$emit('open-cluster-popover', _this.clusterMarkers);
+          }
+        },
+        "ref": "clusterRef"
+      }, [resultsToRender.map(function (marker, index) {
+        return h(GoogleMapMarker$1, {
+          "attrs": {
+            "index": index,
+            "marker": marker
+          },
+          "props": _extends({}, markerProps),
+          "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) {
+      return h(GoogleMapMarker$1, {
+        "attrs": {
+          "index": index,
+          "marker": marker
+        },
+        "props": _extends({}, markerProps),
+        "on": _extends({}, _this.$listeners)
+      });
+    })]);
+  }
+};
+
+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(GmapMapFull, {
+    load: {
+      key: options.key,
+      libraries: 'places'
+    },
+    installComponents: false
+  });
+}; // Add componentType for SSR
+
+
+ReactiveGoogleMap.componentType = componentTypes.reactiveMap;
+
+export default ReactiveGoogleMap;