Google-maps-react: Drag marker event with callback providing lat/long?

[acomito]

Is there an event for moving the Marker and getting the new lat/long info?

like onDragEnd but for the marker?

[JesperWe]

No there isn't, unfortunately. Just found this issue when looking for it.
I'll submit a PR.

[JesperWe]

PR #43

[paradigmist]

Hi @JesperWe, can I have an example of draggable marker?

[JesperWe]

@paradigmist Just apply the PR and do something like:

<Marker draggable={true} onDragEnd={props.onMarkerDragEnd}/>

[paradigmist]

@JesperWe The PR has been merged right? If I add draggable and onDragEnd attributes my map marker is still unmovable, is there anything I am missing?

[JesperWe]

Sorry, yes, PR is merged. Dunno what your missing, I stopped using this component and switched to react-google-maps so my memory is fading :-)

[auser]

PR is merged and released a new version.

[Timothylawler]

Btw the property for drag end is: onDragend, without capital E. could save some time for next person

[alexisspa9]

It is probably a silly question and easy one but I can't seem to figure out how to retrieve the lat and lng after the event is fired. I passed a function on onDragEnd which is like this:

onMarkerDragEnd = (evt) => {
console.log(evt);
}

how do i get the marker position from the evt?

[anasyo10]

I would like to know as well, how do you get the lat lng ?

[alexisspa9]

Hi @JesperWe, I really tried to figure this out but i can't. How do you get the lat and lng of the marker after the event is being fired? I did this:

<Marker draggable={true} onDragEnd={this.onMarkerDragEnd}/>

and the function onMarkerDragEnd is:
onMarkerDragEnd = (evt) => { console.log(evt); }

it logs a google maps object on which i cant figure out the way to retrieve the marker position, i tried a lot of stuff like:
console.log(evt.google.maps.Marker.getPosition().lat());

but it always returns an undefined error. Help is really appreciated!

Thank you very much

[alexisspa9]

@anasyo10 I posted the question on stackoverflow and thanks to tholle the answer is that:
The third argument to the onDragEnd event listener function contains the coordinates of the marker after the drag.

and i tested like this:
onMarkerDragEnd = (one, two, three) => { const { latLng } = three; const lat = latLng.lat(); const lng = latLng.lng(); console.log(lat); };

and it logs the lat so it works! I hope this helps you.

[anasyo10]

@alexisspa9 you are love, thanks alot.

[zomars]

Thank you @Timothylawler I was banging my head with this!

[satyasandeep007]

@alexisspa9 can you tell me what are the first two arguments in onMarkerDragEnd event?

[shivamjjha]

onMarkerDragEnd(mapProps, map) {
        console.log('args:', mapProps, map);
        console.log(map.getCenter().lat());
}