Simple Marker

Click to draw Marker


Note the initial values, You can drag and click.
Location: null


import type { MapMouseEvent } from "@vis.gl/react-google-maps";
// import { Marker } from '@vis.gl/react-google-maps'; // deprecated
import { AdvancedMarker } from '@vis.gl/react-google-maps';

// ...

function onClick(ev: MapMouseEvent) {
  setLocation(ev.detail.latLng);
}

function onDrag(e: google.maps.MapMouseEvent) {
  setLocation(e.latLng?.toJSON() || null);
}

// ...
<SimpleMap 
  onClick={onClick} 
  height="500px" 
  mapId={id} // Advance Marker needs mapId to be set
>
  <AdvancedMarker 
    position={location} 
    clickable={true}
    draggable={true}
    onDrag={onDrag}
    onClick={() => alert("marker was clicked!")}
    title={"clickable, draggable google.maps.Marker"}
  />
</SimpleMap>