43 lines
995 B
TypeScript
43 lines
995 B
TypeScript
import { AdvancedMarker, Pin, 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({
|
|
markerKey,
|
|
poi,
|
|
setMarkerRef,
|
|
children,
|
|
}: IGMapMarker) {
|
|
const map = useMap();
|
|
|
|
return (
|
|
<AdvancedMarker
|
|
onClick={() => {
|
|
map?.panTo(poi.location);
|
|
map?.setZoom(15);
|
|
}}
|
|
key={markerKey}
|
|
position={poi.location}
|
|
ref={(marker) =>
|
|
!poi.ignoreClusterization && setMarkerRef(marker, markerKey.toString())
|
|
}
|
|
>
|
|
<Pin
|
|
background={"transparent"}
|
|
glyphColor={"transparent"}
|
|
borderColor={"transparent"}
|
|
scale={poi.clickableAreaScale || 1}
|
|
>
|
|
{children}
|
|
</Pin>
|
|
</AdvancedMarker>
|
|
);
|
|
}
|