diff --git a/src/components/SearchMap/SearchMap.js b/src/components/SearchMap/SearchMap.js
index e9a12f59..8b3447c0 100644
--- a/src/components/SearchMap/SearchMap.js
+++ b/src/components/SearchMap/SearchMap.js
@@ -1,39 +1,69 @@
import React, { Component, PropTypes } from 'react';
-import { injectIntl, intlShape } from 'react-intl';
import { withGoogleMap, GoogleMap } from 'react-google-maps';
import classNames from 'classnames';
import { types as sdkTypes } from '../../util/sdkLoader';
import * as propTypes from '../../util/propTypes';
-import { formatMoney } from '../../util/currency';
-import config from '../../config';
-import { SearchMapPriceLabel } from '../../components';
+import { SearchMapListingCard, SearchMapPriceLabel } from '../../components';
import css from './SearchMap.css';
+const PRICE_LABEL_HANDLE = 'SearchMapPriceLabel';
+
+/**
+ * Fit part of map (descriped with bounds) to visible map-viewport
+ *
+ * @param {Object} map - map that needs to be centered with given bounds
+ * @param {SDK.LatLngBounds} bounds - the area that needs to be visible when map loads.
+ */
const fitMapToBounds = (map, bounds) => {
const { ne, sw } = bounds || {};
// map bounds as string literal for google.maps
const mapBounds = bounds ? { north: ne.lat, east: ne.lng, south: sw.lat, west: sw.lng } : null;
// If bounds are given, use it (defaults to center & zoom).
- if (mapBounds) {
+ if (map && mapBounds) {
map.fitBounds(mapBounds);
}
};
-// withGoogleMap HOC handles some of the google map initialization states.
+/**
+ * hasParentWithClassName searches class name from parent elements of given target
+ * @param {Node} target - element whose parent might contain given class.
+ * @param {String} className - class name string to be found
+ */
+const hasParentWithClassName = (target, className) => {
+ return [...document.querySelectorAll(`.${className}`)].some(
+ el => el !== target && el.contains(target)
+ );
+};
+
+/**
+ * MapWithGoogleMap uses withGoogleMap HOC.
+ * It handles some of the google map initialization states.
+ */
const MapWithGoogleMap = withGoogleMap(props => {
- const { center, intl, listings, mapRef, zoom } = props;
+ const { center, listings, listingOpen, onListingClicked, onMapLoad, zoom } = props;
const priceLabels = listings.reverse().map(listing => {
- // Create formatted price if currency is known or alternatively show just the unknown currency.
- const price = listing.attributes.price;
- const formattedPrice = price && price.currency === config.currencyConfig.currency
- ? formatMoney(intl, config.currencyConfig, price)
- : price.currency;
- return