48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { AdvancedMarker, useMap } from "@vis.gl/react-google-maps";
|
|
import type { Marker } from "@googlemaps/markerclusterer";
|
|
import IGMapPoi from "../../types/IGMapPoi";
|
|
|
|
interface IGMapMarker {
|
|
markerKey: number;
|
|
poi: IGMapPoi;
|
|
setMarkerRef: (marker: Marker | null, key: string) => void | undefined;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function MapMarker({
|
|
poi,
|
|
children,
|
|
markerKey,
|
|
setMarkerRef,
|
|
}: IGMapMarker) {
|
|
const map = useMap();
|
|
const { location, ignoreClusterization, label } = poi;
|
|
|
|
return (
|
|
<AdvancedMarker
|
|
key={markerKey}
|
|
position={location}
|
|
ref={(marker) => {
|
|
if (!ignoreClusterization) {
|
|
setMarkerRef(marker, markerKey.toString());
|
|
}
|
|
}}
|
|
onClick={() => {
|
|
map?.panTo(location);
|
|
map?.setZoom(17);
|
|
}}
|
|
>
|
|
<div
|
|
className={`relative flex items-center gap-x-2 hover:[&>.label-container]:opacity-100 hover:[&>.label-container]:left-[calc(100%-38px)] hover:[&>.label-container]:pointer-events-auto hover:[&>.label-container]:z-140 hover:[&>.gmap-img-container]:z-150`}
|
|
>
|
|
{children}
|
|
{label && (
|
|
<div className="label-container text-black absolute text-s left-0 opacity-0 w-max pointer-events-none transition-[left,opacity] bg-white pl-11 pr-3 py-2.5 rounded-2xl">
|
|
{label}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AdvancedMarker>
|
|
);
|
|
}
|