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>

no. I can view the map and the marker. But the marker does not move. — Ash, Jan 06 '16 at 15:50
you should add the listener right after you create the marker. — goblin, Jan 06 '16 at 15:59

score 1 · Accepted Answer · answered Jan 06 '16 at 15:51

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


}

answered Jan 06 '16 at 15:51

ScaisEdge

131,976
10
91
107

This: Uncaught ReferenceError: showError is not defined – Ash Jan 06 '16 at 16:53
This mean your function showError is not defined. or more simply you haven't close the brackets correctly..so the interpreter don't find the function... – ScaisEdge Jan 06 '16 at 16:58
yes its working thanks. Can u tell me how can I pass the location name to textbox? and pop up text on the marker? I am new to google maps I cant figure out. – Ash Jan 06 '16 at 17:05
Well in S.O. if fair post a question at time. so if this is solved is correct mark as accepted and if useful rate as useful too. If you need more support with other question posting a proper question is the better way for to allow the whole community could help you or provide suggestions. – ScaisEdge Jan 06 '16 at 17:14
Anyway post you new answer there a lot of people in S.O. that can help.. me too when i'm not busy... – ScaisEdge Jan 06 '16 at 17:15
please check this: http://stackoverflow.com/questions/34659498/marker-should-point-to-textbox-location-and-if-user-drags-the-marker-the-locatio – Ash Jan 07 '16 at 16:08
http://stackoverflow.com/questions/34681476/apply-jquery-effect-to-button-and-div-which-are-on-aspx-page/34689835# – Ash Jan 09 '16 at 06:42

Google maps marker does not drag

1 Answers1