react-hotels-on-map/build/index.js

Presents a set of hotels as clustered markers on Google Map, each with an info window displaying the hotel summary

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _MarkerClusterer = require('./MarkerClusterer');

var _MarkerClusterer2 = _interopRequireDefault(_MarkerClusterer);

var _defaultMapConfiguration = require('./defaultMapConfiguration');

var _defaultMapConfiguration2 = _interopRequireDefault(_defaultMapConfiguration);

var _marker = require('./marker');

var _marker2 = _interopRequireDefault(_marker);

var _hotelInfoHtml = require('./hotelInfoHtml');

var _hotelInfoHtml2 = _interopRequireDefault(_hotelInfoHtml);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* global global */

var UNIT_TESTING = typeof global.describe === 'function';

function newInfoWindow(hotel) {
    var maps = global.window.google.maps;

    return new maps.InfoWindow({ content: (0, _hotelInfoHtml2.default)(hotel) });
}

exports.default = _react2.default.createClass({
    displayName: 'src',

    propTypes: {
        hotels: _react2.default.PropTypes.array.isRequired,
        markerClusterImageUrlPrefix: _react2.default.PropTypes.string
    },

    render: function render() {
        return _react2.default.createElement('div', { className: 'hotels-on-map' });
    },
    componentDidMount: function componentDidMount() {
        if (UNIT_TESTING) {
            return;
        }

        this.initMap();
    },
    resetMap: function resetMap() {
        var element = this.getDOMNode();

        element.removeChild(element.querySelector('div'));
        this.map = null;
        this.initMap();
    },
    initMap: function initMap() {
        var maps = global.window.google.maps;

        this.map = new maps.Map(this.getDOMNode(), (0, _defaultMapConfiguration2.default)());
        this.displayMarkers();
    },
    displayMarkers: function displayMarkers() {
        var markers = this.markers();
        var options = { gridSize: 30 };

        if (markers.length === 1) {
            this.applyOneHotelConfiguration(markers);
        } else {
            if (this.props.markerClusterImageUrlPrefix) {
                options.imagePath = this.props.markerClusterImageUrlPrefix;
            }

            var clusterer = new _MarkerClusterer2.default(this.map, markers, options);

            clusterer.fitMapToMarkers(this.map, markers);
        }
    },
    markers: function markers() {
        var _this = this;

        return this.props.hotels.map(function (hotel) {
            var result = (0, _marker2.default)(hotel.geolocation);

            result.addListener('click', function () {
                newInfoWindow(hotel).open(_this.map, result);
            });

            return result;
        });
    },
    applyOneHotelConfiguration: function applyOneHotelConfiguration(markers) {
        var maps = global.window.google.maps;
        var _props$hotels$0$geolo = this.props.hotels[0].geolocation,
            latitude = _props$hotels$0$geolo.latitude,
            longitude = _props$hotels$0$geolo.longitude;


        this.map.setCenter({ lat: latitude, lng: longitude });
        this.map.setZoom(13);

        markers[0].setMap(this.map);
        maps.event.trigger(markers[0], 'click');
    }
});