CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Bhazk
Bhazk

Reputation: 221

Drawing Manager Marker Listener Position_Changed

I have a problem with my code. I want to make a draggable marker after I draw the marker using drawing manager and I want to make the value of the input field [lat & lon] change with draggable marker position value. This is my code:

    function initMap() {
        // set up the map
        mapModal = new google.maps.Map(document.getElementById('mapModal'), {
            center : {lat: lat, lng: lng},
            zoom : 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: false,
            zoomControl : true,
        });

        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['marker']
            },
            markerOptions: {
                editable: true,
                draggable: true,
            },
        });
        drawingManager.setMap(mapModal);
        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(marker) {
            google.maps.event.addListener(marker, 'position_changed', function () {
                var lat = marker.getPosition().lat();
                var lon = marker.getPosition().lng();

                $('#lat').val(lat);
                $('#lon').val(lon);
            });
        });
    }

I never get the value of the input field [lat & lon] has changed. Can anyone here help me for solve my problem?? Thanks!

Upvotes: 2

Views: 1628

Answers (1)

Emmanuel Delay
Emmanuel Delay

Reputation: 3679

I think the main problem is marker.getPosition().lat(); Inside an event handler you should use "this" instead of "marker". Not sure if it solves everything.

Here is a simple "drag marker, write coordinates in input elements"

<input id="lat" />
<input id="lng" />
<div id="map"></div>
<style>
    #map {
        height: 400px;
    }
</style>
<script>
    function initMap() {
        var myLatlng = {  // Brussels
            lat: 50.85,
            lng: 4.35
        };

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: myLatlng
        });

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable: true,
            title: 'Drag me'
        });

        google.maps.event.addListener(marker, 'position_changed', function() {
            // inside an event handler you should use "this".  
            // "this" represents whatever got affected, in this case the marker
            document.getElementById('lat').value = this.getPosition().lat();
            document.getElementById('lng').value = this.getPosition().lng();
        });

    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Upvotes: 2

Related Questions