@randy.tarampi/jsx/esm/lib/components/map/google/index.js

Some common JSX components for www.randytarampi.ca

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import PropTypes from "prop-types";
import React, { PureComponent } from "react";
import { GoogleMap, withGoogleMap, withScriptjs } from "react-google-maps";
import { LoadingSpinner } from "../../loadingSpinner";
import { MAP_CONTAINER_HEIGHT_PX } from "../util";
import { GoogleMapStyles } from "./styles";
export var MAP_API_URL = "https://maps.googleapis.com/maps/api/js?key=".concat("AIzaSyCkMBpsbrY5zpOUAwyHsBGoHawaTPwg3yM", "&v=3.exp&libraries=geometry,drawing,places");
export * from "./markerClusterer";
export var ComposedGoogleMap = withScriptjs(withGoogleMap((_ref) => {
  var {
    googleMapRef
  } = _ref,
      props = _objectWithoutProperties(_ref, ["googleMapRef"]);

  return /*#__PURE__*/React.createElement(GoogleMap, _extends({
    ref: googleMapRef
  }, props));
}));
ComposedGoogleMap.defaultProps = {
  googleMapURL: MAP_API_URL,
  defaultZoom: 10,
  defaultCenter: {
    lat: 52.5018708,
    lng: 13.3655289
  },
  // defaultMapTypeId: "terrain", // NOTE-RT: google.maps.MapTypeId.TERRAIN
  defaultOptions: {
    minZoom: 2,
    styles: GoogleMapStyles,
    streetViewControl: true,
    streetViewControlOptions: {
      position: 6 // NOTE-RT: google.maps.ControlPosition.BOTTOM_LEFT

    },
    zoomControl: true,
    zoomControlOptions: {
      position: 6 // NOTE-RT: google.maps.ControlPosition.BOTTOM_LEFT

    },
    gestureHandling: "greedy"
  }
};
var googleMapCallbacks = ["onDblClick", "onDragEnd", "onDragStart", "onMapTypeIdChanged", "onMouseMove", "onMouseOut", "onMouseOver", "onRightClick", "onTilesLoaded", "onBoundsChanged", "onCenterChanged", "onClick", "onDrag", "onHeadingChanged", "onIdle", "onProjectionChanged", "onResize", "onTiltChanged", "onZoomChanged"];
export class GoogleMapComponent extends PureComponent {
  constructor(passedProps) {
    var {
      googleMapRef
    } = passedProps,
        props = _objectWithoutProperties(passedProps, ["googleMapRef"]);

    var propsKeys = Object.keys(props);
    super(passedProps);
    this.googleMapRef = googleMapRef || /*#__PURE__*/React.createRef();
    this.getGoogleMap = this.getGoogleMap.bind(this);
    this.passedGoogleMapCallbackProps = propsKeys.reduce((passedGoogleMapCallbackProps, propKey) => {
      if (googleMapCallbacks.includes(propKey)) {
        passedGoogleMapCallbackProps[propKey] = props[propKey].bind(this, this.getGoogleMap, props.id);
      }

      return passedGoogleMapCallbackProps;
    }, {});

    if (this.props.instantiateMap) {
      this.props.instantiateMap(this.getGoogleMap, props.id);
    }
  }

  get googleMap() {
    return this.googleMapRef && this.googleMapRef.current;
  }

  componentWillUnmount() {
    if (!this.props.persistentMap) {
      if (this.props.clearMap) {
        this.props.clearMap(this.props.id);
      }
    }
  }

  getGoogleMap() {
    return this.googleMap;
  }

  render() {
    var _this$props = this.props,
        {
      className,
      mapContainerHeight,
      mapContainerHeightPx,
      containerElement,
      loadingElement,
      mapElement
    } = _this$props,
        props = _objectWithoutProperties(_this$props, ["className", "mapContainerHeight", "mapContainerHeightPx", "containerElement", "loadingElement", "mapElement"]);

    var actualMapContainerHeight = mapContainerHeight ? mapContainerHeight : "".concat(mapContainerHeightPx, "px");
    return /*#__PURE__*/React.createElement(ComposedGoogleMap, _extends({
      googleMapRef: this.googleMapRef
    }, _objectSpread(_objectSpread({
      containerElement: containerElement ? containerElement : /*#__PURE__*/React.createElement("div", {
        className: "map__container map__container--google",
        style: {
          height: actualMapContainerHeight,
          minHeight: actualMapContainerHeight
        }
      }),
      loadingElement: loadingElement ? loadingElement : /*#__PURE__*/React.createElement("div", {
        className: ["map__loading"].concat(className).join(" "),
        style: {
          height: "100%"
        }
      }, /*#__PURE__*/React.createElement(LoadingSpinner, null)),
      mapElement: mapElement ? mapElement : /*#__PURE__*/React.createElement("div", {
        className: ["map map--google"].concat(className).join(" ")
      })
    }, props), this.passedGoogleMapCallbackProps)));
  }

}
GoogleMapComponent.defaultProps = {
  mapContainerHeightPx: MAP_CONTAINER_HEIGHT_PX,
  persistentMap: true
};
GoogleMapComponent.propTypes = {
  id: PropTypes.string.isRequired,
  googleMapRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.object
  })]),
  className: PropTypes.string,
  mapContainerHeight: PropTypes.string,
  mapContainerHeightPx: PropTypes.number,
  containerElement: PropTypes.node,
  loadingElement: PropTypes.node,
  mapElement: PropTypes.node,
  instantiateMap: PropTypes.func,
  clearMap: PropTypes.func,
  persistentMap: PropTypes.bool.isRequired
};
export default GoogleMapComponent;