Google maps marker to form field

Wappler General How To
#1

How can I pass the a google maps dragabble marker information to a form field. I dont find any dynamic event for google maps marker. I find over the map itself but I cant get display any dragable marker on it.

 <div class="container pt-5">
        <div class="row">
            <div class="col-8">
                <dmx-google-maps id="maps1" latitude="15.762521826200048" longitude=" -96.10052831039862" zoom-control="true" fullscreen-control="true" zoom="15" dmx-bind:markers="" marker-latitude="'15.762521826200048'" marker-longitude="' -96.10052831039862'" marker-draggable="true">
                    <dmx-google-maps-marker id="marker1" latitude="15.762521826200048" longitude=" -96.10052831039862" draggable="true"></dmx-google-maps-marker>
                </dmx-google-maps>

            </div>

            <form action="">
                <input type="text" dmx-bind:value="maps1.latitude">
            </form>
            <div class="col-4">
                <div class="pb-3">
                    <h2 class="tittle-sm txt-gold">Location</h2>
                    <div class="txt-general txt-gray">Discover the finest rentals in town! Our expert team is ready to assist you in finding the perfect place to call home. Don't miss out on the town's best – let us help you secure your ideal rental today!</div>
                </div>

            </div>
        </div>
    </div>
#2

I know it can be done. I’ve done it myself. Unfortunately I’m on another job site today. If no one has helped by tomorrow I can look up the code on how I did this. I think it has something to do with dynamic attributes? or dynamic events there should be choices there for that. If not it could be missed in the new AC/2 if you are running beta. But if not they should be there. Hit me up in the morning if you haven’t sorted this.

#3

Click on the Google Maps component and go into Dynamic Events. Add one for Marker Position Changed. Then add actions in there to set the value of two hidden fields - longitude and latitude.

#4

But the marker is not displayed on map. the map appear and move but no marker is displayed. I add inside a marker component but seems to not work

#5

You need to add the marker and set it to ‘draggable’ and give it initial values for the Dynamic Attributes for longitude and latitude.

I have it working fine on a site but it’s not using AC v2 so I’m not ruling out an issue you might have found in the new beta version.

#6

Thanks for the help I have like this.

Captura de Pantalla 2024-03-12 a la(s) 9.14.42

Is this correct?

#7

Yes. But when you click on your marker, have you set the longitude and latitude dynamic values and also ticked the box to make it draggable?

#8

Yes I have like that.

#9

Are you on the v2 beta of App Connect?

#10

Beta 2

#11

It happen funny. If I add a Marker component displays but wen you drag and drop marker no event is executed. But if you move the map it execute.

Grabación de pantalla 2024-03-12 a la(s) 9.40.32

#12

Did you add the Marker Position Changed dynamic event?