Google maps marker does not drag

Question

I have been trying to add google map to my website where the marker will show user's current position and user can drag the marker and the location name will be in the textbox. But my marker is not moving and also how to get the location in textbox and vice versa textbox's location on the map. I want to achieve this: enter link description here

    function initMap() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,   showError);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        latlon = new google.maps.LatLng(lat, lon)
        mapholder = document.getElementById('map')

        var myOptions = {
            center: latlon, zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            navigationControlOptions: 
            { style:google.maps.NavigationControlStyle.SMALL }
            }  

        var map = new google.maps.Map(document.getElementById("map"),     myOptions);
        var marker = new google.maps.Marker({
            position: latlon,
            map: map,
            title: "Choose",
            draggable: true
        });


    }

    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }

    updateMarkerPosition(latlon);
    geocodePosition(latlon);

    // Add dragging event listeners.
    google.maps.event.addListener(marker, 'dragstart', function () {
        updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker, 'drag', function () {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function () {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });



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

Answer 1

if you want use the listener these should be locate where you create marker and not outside the function ..

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('map')

    var myOptions = {
        center: latlon, 
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        navigationControlOptions: 
        { style:google.maps.NavigationControlStyle.SMALL }
        }  

    var map = new google.maps.Map(document.getElementById("map"),     myOptions);
    var marker = new google.maps.Marker({
        position: latlon,
        map: map,
        title: "Choose",
        draggable: true
    });

    // Add dragging event listeners.
    google.maps.event.addListener(marker, 'dragstart', function () {
        updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker, 'drag', function () {
       updateMarkerStatus('Dragging...');
       updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function () {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });


}