Very new to React (and JavaScript in general). I’m drawing a Google Maps map, setting some markers based on some objects. Works fine. However I’d like to, ultimately, update my object with the new coordinates if dragging the marker associated with the object. This because I need to update the entries in a DB later.
Help would be greatly appreciated. React/JS confuses me a lot initially. Thank you.
export default function MapGeo() {
const { isLoaded } = useLoadScript({
googleMapsApiKey: "secret",
})
if (!isLoaded) return <div>Loading...</div>;
return <Map />;
}
// Dummy-data for testing purpose; should come from API
var dataArray = [
{ KeyId: 1, Latitude: 56.1065, Longitude: 10.20000, Address: "Street 1" },
{ KeyId: 2, Latitude: 56.1066, Longitude: 10.20010, Address: "Street 2" },
{ KeyId: 3, Latitude: 56.1067, Longitude: 10.20005, Address: "Street 3" },
{ KeyId: 4, Latitude: 56.1068, Longitude: 10.20010, Address: "Street 4" }
];
function Map() {
// Center card using first array item
const center = useMemo(() => ({lat: dataArray[0].Latitude, lng: dataArray[0].Longitude}), []);
const [da, setDa] = useState(dataArray);
return (
<div>
<h1>{title}</h1>
<GoogleMap
zoom = {18}
center = {center}
mapTypeId = {google.maps.MapTypeId.ROADMAP}
mapContainerClassName = "map-container"
>
{dataArray.map(d => {
return (
<Marker
position = { {lat: d.Latitude, lng: d.Longitude} }
name = {d.KeyId}
draggable = { draggable }
animation = { google.maps.Animation.DROP }
title = {
'Adresse: ' + d.Address + 'n'
}
// onDragEnd={(t, map, coord) => this.onMarkerDragEnd(coord, index)}
/>
)
})}
</GoogleMap>
</div>
);
}
Not really sure how I can accomplish this. Use OnDragEnd maybe? Was reading up on useState but had no joy with that.