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>