How to create a new marker using MapMouseEvent?

[lmykhailo]

When trying to integrate a function that adds a new marker to the array I get this error
TS2339: Property 'latLng' does not exist on type 'MapMouseEvent'.

What should I change to make it work?

import { APIProvider, Map, MapMouseEvent } from "@vis.gl/react-google-maps";
import Markers from "../components/Markers/Markers";
import { useState } from "react";

export interface IMarkers {
  lat: number;
  lng: number;
  key: string;
}

export default function MapPage() {
  const [markers, setMarkers] = useState<IMarkers[]>([
    { lat: 48.738968, lng: 37.584351, key: "marker1" },
  ]);

  const handleMapClick = (event: MapMouseEvent) => {
    if (event.latLng) {
      const newMarker: IMarkers = {
        lat: event.latLng.lat(),
        lng: event.latLng.lng(),
        key: `marker-${markers.length + 1}`,
      };
      setMarkers([...markers, newMarker]);
    }
  };

  return (
    <div style={{ height: "80vh", width: "100%" }}>
      <APIProvider apiKey="hidden">
        <Map
          center={{ lat: 48.738968, lng: 37.584351 }}
          zoom={15}
          onClick={handleMapClick}
          mapId="hidden"
        >
          <Markers MarkerPoints={markers} />
        </Map>
      </APIProvider>
    </div>
  );
}

[mrMetalWood]

The latLng property is available via the detail property on the MapMouseEvent.

Should be event.detail.latLng.lat and event.detail.latLng.lng.

Does that work for you?

[lmykhailo]

Yep, that worked, thank you!