无法使用JavaScript在Google Map中正确拖动标记

Question

I cannot drag marker of Google Map using JavaScript. Here is my code:

geocoder.geocode( { 'address': addrs}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        $('#latitude').val(results[0].geometry.location.lat());
        $('#longitude').val(results[0].geometry.location.lng());
        var latitude=results[0].geometry.location.lat();
        var longitude=results[0].geometry.location.lng();
        var title=document.getElementById('googleMap').value;
        var desc=title+","+address;
        console.log(latitude,longitude);
        var markers = [{"lat":latitude,"lng":longitude},{"title": title,"lat":latitude,"lng":longitude,"description":desc}];
    // $window.addEventListener('load', onload, false);
     // $window.onload = function () {
    setTimeout(function(){
        var mapOptions = {
         center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                google.maps.event.trigger(map, "resize");
                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();
                for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                draggable: true,
                position: myLatlng,
                map: map,
                title: data.title
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
                });
                })(marker, data);
                google.maps.event.addListener(marker, 'dragend', function (event) {
                    var latdrag = this.getPosition().lat();
                    var longdrag= this.getPosition().lng();
                    console.log('latlong',latdrag,longdrag);
                });
                }
                map.setCenter(latlngbounds.getCenter());
                map.fitBounds(latlngbounds);
                zoomChangeBoundsListener = 
                google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
if (this.getZoom()){
    this.setZoom(12);
}
});
 setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);
},2000);
} 
else {
    alert("Geocode was not successful for the following reason: " + status);
              }
});

Here my issue is I am able to drag the marker but while I am dragging the new marker is coming to droppable place and the first one is still there. Here I need that single marker will only drag to any place and no new marker will create.

Answer 1

You are creating two markers in the same place and dragging the top one.

var markers = [{"lat":latitude,"lng":longitude},{"title": title,"lat":latitude,"lng":longitude,"description":desc}];

creates an array with two elements and in the loop, two markers are created.