Creating a map marker with new visgl library

[cshi2024]

Hello,

I created a map using the new visgl library, but I am having trouble creating a new map marker by double-clicking on the map.

Here is the relevant code:

import React, { useState } from "react";
import {
  APIProvider,
  InfoWindow,
  Map,
} from "@vis.gl/react-google-maps";
 
const GoogleMap = ({ apiKey }) => {
  const position = { lat: 39.78057, lng: -86.1666643 };
  const [open, setOpen] = useState(false);
 
  const handleDblClick = (e) => {
    console.log(e);
  };
 
  return (
    <APIProvider apiKey={apiKey}>
      <div style={{ height: "100vh", width: "100%" }}>
        <Map
          zoom={9}
          center={position}
          mapId={"GOOGLE_MAPS_MAP_ID"}
          onDblclick={(e) => handleDblClick(e)}
        >
          {open && (
            <InfoWindow position={position} onCloseClick={() => setOpen(false)}>
              <p>I should be in Indiana</p>
            </InfoWindow>
          )}
        </Map>
      </div>
    </APIProvider>
  );
};
 
export default GoogleMap;

[usefulthink]

The way I'd do it would be something like this: https://codesandbox.io/p/devbox/boring-tree-fvyrk9?file=%2Fsrc%2Fapp.tsx%3A21%2C3