Draggable pins on Google Maps

Could we have an on-drop / drag-end listener within the maps plugin so that an address can be entered, a pin/marker placed on a Google map using the existing geolocate action but allow the pin to be moved to a more accurate position and update the co-ordinates accordingly?

I know the pins are draggable at the moment. But I could not find a wat to update a input field’s values when the pin is dragged. I remember a tutorial on DMX way back that this this… I think. But not sure if at all possible on Wappler currently. Please point me in the direction of a tutorial if there is one.

We currently return only the coordinates on map click, not on marker drag.

Ok, thanks. Thinking of some sort of way to accomplish what I want with the tools available.

Can one drop a pin on map click and then set coordinates. then when you click elsewhere you remove current pin, set new coordinates and drop pin where the new click was? That way user can fine tune a places autocomplete pin that was dropped.

Maybe @patrick can check if an on drag/drop event with its coordinates could easily be added.

3 Likes

This has been added in Wappler 2.7.1

The new dynamic event is listed in the dynamic events for the maps component:

and then when you pick a value, you can find lat/lon in the data picker

3 Likes

This is awesome news. I saw it in the features list in today’s update and am very excited. Many thanks, I will have a work with it now.

1 Like

Awesome, I have been asking for this for while! Yeah go team!

1 Like

I tried this now and just cannot get it to update a text field:

<dmx-google-maps id="maps2" address="7 Philip le Roux Avenue,  Malanshof, Johannesburg, South Africa"
											dmx-on:markerpositionchanged="register_location.cityLat.setValue($event.latitude);register_location.cityLng.setValue($event.longitude)">
											<dmx-google-maps-marker id="marker1" address="7 Philip le Roux Avenue,  Malanshof, Johannesburg, South Africa" draggable></dmx-google-maps-marker>
										</dmx-google-maps>

What is not working exactly?

Sorry. Input fields aren’t filled with lat and lon values when I drag the marker.

Are there any errors in the console?
Are you sure you uploaded the latest maps js to your server and cleared the cache?

No errors. Uploaded files. Cleared cache.

Can you put the map and input outside the tabs please and try again?

Done, also re-added the dynamic action with set values because the code probably changed a bit.

Not working.

I believe the wrong event is generated by Wappler, markerpositionchanged should be markerchangeposition.

Also changed that now - still no luck.

ok, I looked it up, the problem is actually a typo in the code. event was generated correctly in Wappler markerpositionchanged.

search in code for "markerchangeposition" and replace with "markerpositionchanged".

1 Like