@chayns-components/maps
Version:
A set of beautiful React components for developing your own applications with chayns.
66 lines (64 loc) • 1.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
const Marker = ({
id,
isDraggable,
position,
onChange,
onRemove,
map
}) => {
const [pin, setPin] = (0, _react.useState)();
(0, _react.useEffect)(() => {
if (pin) {
google.maps.event.addListener(pin, 'dragend', evt => {
var _evt$latLng, _evt$latLng2;
const newLat = (_evt$latLng = evt.latLng) === null || _evt$latLng === void 0 ? void 0 : _evt$latLng.lat();
const newLng = (_evt$latLng2 = evt.latLng) === null || _evt$latLng2 === void 0 ? void 0 : _evt$latLng2.lng();
if (!newLat || !newLng) {
return;
}
onChange({
id,
position: {
lng: newLng,
lat: newLat
}
});
});
google.maps.event.addListener(pin, 'rightclick', () => {
onRemove(id);
});
}
}, [pin, id, onChange, onRemove]);
(0, _react.useEffect)(() => {
if (!pin) {
setPin(new google.maps.Marker({
map
}));
}
// remove marker from map on unmount
return () => {
if (pin) {
pin.setMap(null);
}
};
}, [pin, map]);
(0, _react.useEffect)(() => {
if (pin) {
pin.setOptions({
draggable: isDraggable,
position,
map
});
}
}, [pin, isDraggable, position, map]);
return null;
};
Marker.displayName = 'Marker';
var _default = exports.default = Marker;
//# sourceMappingURL=Marker.js.map