@chayns-components/maps/lib/cjs/components/position-input/map-wrapper/map/Map.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Map = require("./Map.styles");
var _positionInput = require("../../../../hooks/positionInput");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Map = ({
  mapTypeControl,
  fullscreenControl,
  streetViewControl,
  children,
  onClick,
  onIdle,
  zoom,
  center,
  onPositionChange
}) => {
  const [map, setMap] = (0, _react.useState)();
  const ref = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    if (ref.current && !map) {
      setMap(new window.google.maps.Map(ref.current, {}));
      const input = document.getElementById('auto-complete-input');
      if (!input) {
        return;
      }
      const autoComplete = new google.maps.places.Autocomplete(input, {
        // componentRestrictions: { country: ["de"] },
        fields: ['address_component', 'geometry'],
        types: ['(cities)']
      });
      input.placeholder = '';
      autoComplete.addListener('place_changed', () => {
        var _place$geometry;
        const place = autoComplete.getPlace();
        const placeLocation = (_place$geometry = place.geometry) === null || _place$geometry === void 0 ? void 0 : _place$geometry.location;
        if (!placeLocation) {
          return;
        }
        onPositionChange({
          lat: placeLocation.lat(),
          lng: placeLocation.lng()
        });
      });
    }
  }, [ref, map, onPositionChange]);
  (0, _react.useEffect)(() => {
    if (map) {
      map.setCenter(center);
    }
  }, [center, map]);

  // because React does not do deep comparisons, a custom hook is used
  // see discussion in https://github.com/googlemaps/js-samples/issues/946
  (0, _positionInput.useDeepCompareEffectForMaps)(() => {
    if (map) {
      map.setOptions({
        mapTypeControl,
        fullscreenControl,
        streetViewControl,
        zoom
      });
    }
  }, [map]);
  (0, _react.useEffect)(() => {
    if (map) {
      ['click', 'idle'].forEach(eventName => google.maps.event.clearListeners(map, eventName));
      if (onClick) {
        map.addListener('click', onClick);
      }
      if (onIdle) {
        map.addListener('idle', () => onIdle(map));
      }
    }
  }, [map, onClick, onIdle]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Map.StyledMap, {
    ref: ref
  }), _react.default.Children.map(children, child => {
    if (/*#__PURE__*/_react.default.isValidElement(child)) {
      // set the map prop on the child component
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      return /*#__PURE__*/_react.default.cloneElement(child, {
        map
      });
    }
    return null;
  }));
};
Map.displayName = 'Map';
var _default = exports.default = Map;
//# sourceMappingURL=Map.js.map