Latitud Longitud Picker

2

This should work, you’ll need your own Google maps API for it to work though:

<div class="container">
    <div class="row">
        <div class="col mt-5 mb-5">
            <dmx-google-maps id="maps1" zoom="4" zoom-control="true" fullscreen-control="true" scale-control="true" scrollwheel="true" dmx-bind:latitude="" dmx-bind:longitude="" marker-id="uid" marker-latitude="lat" marker-longitude="lng" marker-draggable="true" dmx-on:markerpositionchanged="form1.lat.setValue($event.latitude);form1.lon.setValue($event.longitude)">
                <dmx-google-maps-marker id="marker1" draggable="true" animation="drop" type="purple" dmx-bind:latitude="" dmx-bind:longitude=""></dmx-google-maps-marker>
            </dmx-google-maps>


        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col">
            <form id="form1">
                <div class="form-group mb-3 row">
                    <label for="lat" class="col-sm-2 col-form-label">Some text</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="lat" name="lat" aria-describedby="input1_help" placeholder="Enter some text" dmx-bind:value="" readonly="true">
                        <small id="input1_help" class="form-text text-muted">Your input is very valuable.</small>
                    </div>
                </div>
                <div class="form-group mb-3 row">
                    <label for="lon" class="col-sm-2 col-form-label">Some text</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="lon" name="lon" aria-describedby="input1_help" placeholder="Enter some text" dmx-bind:value="" readonly="true">
                        <small id="input1_help1" class="form-text text-muted">Your input is very valuable.</small>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
1 Like