@chayns-components/maps/lib/esm/components/position-input/map-wrapper/map/marker/Marker.js

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

import { useEffect, useState } from 'react';
const Marker = ({
  id,
  isDraggable,
  position,
  onChange,
  onRemove,
  map
}) => {
  const [pin, setPin] = useState();
  useEffect(() => {
    if (pin) {
      google.maps.event.addListener(pin, 'dragend', evt => {
        const newLat = evt.latLng?.lat();
        const newLng = evt.latLng?.lng();
        if (!newLat || !newLng) {
          return;
        }
        onChange({
          id,
          position: {
            lng: newLng,
            lat: newLat
          }
        });
      });
      google.maps.event.addListener(pin, 'rightclick', () => {
        onRemove(id);
      });
    }
  }, [pin, id, onChange, onRemove]);
  useEffect(() => {
    if (!pin) {
      setPin(new google.maps.Marker({
        map
      }));
    }

    // remove marker from map on unmount
    return () => {
      if (pin) {
        pin.setMap(null);
      }
    };
  }, [pin, map]);
  useEffect(() => {
    if (pin) {
      pin.setOptions({
        draggable: isDraggable,
        position,
        map
      });
    }
  }, [pin, isDraggable, position, map]);
  return null;
};
Marker.displayName = 'Marker';
export default Marker;
//# sourceMappingURL=Marker.js.map