Google maps marker does not drag
<p>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:  <a href="http://www.improve-my-city.com/livedemo/report/" rel="nofollow">enter link description here</a> </p>

<pre><code>    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());
    });



&lt;/script&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer&gt;
&lt;/script&gt;
</code></pre>

<p>
</p>