Draggable and Record Marker Location Google Map Api

here I have a map, in my map, I want to make a marker there can be draggable. When i drag and drop the marker i want it make a record or just change my value of my input.

here my script :

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var locations = [
['location 1', -33.80010128657071, 151.28747820854187, 2,"info"],
['location 2', -33.950198, 151.259302, 1,"info"]
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(-33.92, 151.28747820854187),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: icons[locations[i][4]].icon,
map: map
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

var marker2;
var input = document.getElementById('location');
// map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var geocoder = new google.maps.Geocoder();
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
autocomplete.addListener('place_changed', function() {
infowindow.close();
if (marker2) {
marker2.setMap(null);
}
// marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}

marker2 = new google.maps.Marker({
position:place.geometry.location,
draggable: true,
map: map
});

// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}

// marker2.setPosition(place.geometry.location);
// marker2.setVisible(true);

bindDataToForm(place.formatted_address,place.geometry.location.lat(),place.geometry.location.lng());
infowindow.setContent(place.formatted_address);
infowindow.open(map, marker2);

});
// this function will work on marker move event into map
google.maps.event.addListener(marker2, 'dragend', function() {
geocoder.geocode({'latLng': marker2.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
console.log(results[0]);
bindDataToForm(results[0].formatted_address,marker2.getPosition().lat(),marker2.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker2);
}
}
});
});


function bindDataToForm(address,lat,lng){
document.getElementById('loc_address').value = address;
document.getElementById('lat').value = lat;
document.getElementById('lng').value = lng;
}

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places











</div>
</div>
</div>
</div>

my problem is, my function for record or replace value is not work, what should i change in my code, so my code can run like what I need?

The markers from the places service are draggable, the ones from your data are not.
– geocodezip
Jun 30 at 3:10

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.