Google map with custom markers

src/components/ui/MapMarker.tsx

@@ -0,0 +1,21 @@
+import { AdvancedMarker, Pin } from "@vis.gl/react-google-maps";
+
+interface IGMapMarker {
+  key: string;
+  location: google.maps.LatLngLiteral;
+  children: React.ReactNode;
+}
+
+export default function MapMarker({ key, location, children }: IGMapMarker) {
+  return (
+    <AdvancedMarker key={key} position={location}>
+      <Pin
+        background={"transparent"}
+        glyphColor={"transparent"}
+        borderColor={"transparent"}
+      >
+        {children}
+      </Pin>
+    </AdvancedMarker>
+  );
+}