如何让Google Maps API v3监听dragend事件并在投递时填充表单字段

我正在尝试获取谷歌地图上点击位置的纬度和lng，然后将其存储在数据库中。我已经到了可以点击地图位置并填充表单字段的地步，但我也希望能够将标记拖放到新位置，并更新dragend事件上的表单字段。知道如何做到这一点吗？

HTML：

<div id="container">
  <div class="row-fluid">
    <div class="span10 offset1">
      <div id="holyMapDiv"></div>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span10 offset1">
      <div class="bradyRules">
        <div>Lattitude: <span id="latspan"></span></div>
        <div>Longitude: <span id="lngspan"></span></div>
        <div>Lat Lng: <span id="latlong"></span></div>
        <div>Lat Lng on click: 
        <input type="text" id="latlongclicked"></input></div>
      </div>
    </div>
  </div>
</div>

JavaScript：

var map;
var marker;
function updateMarkerPosition(latLng) {
  document.getElementById('latlongclicked').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}
function mapa()
{
  var opts = {'center': new google.maps.LatLng(39.73757, -104.98472), 'zoom':8, 'mapTypeId': google.maps.MapTypeId.TERRAIN, draggableCursor: 'crosshair'}
    map = new google.maps.Map(document.getElementById('holyMapDiv'),opts);
  google.maps.event.addListener(map,'click',function(event) {
    document.getElementById('latlongclicked').value = event.latLng.lat() + ', ' + event.latLng.lng();
    placeMarker(event.latLng);
  })
  google.maps.event.addListener(map,'mousemove',function(event) {
    document.getElementById('latspan').innerHTML = event.latLng.lat();
    document.getElementById('lngspan').innerHTML = event.latLng.lng();
    document.getElementById('latlong').innerHTML = event.latLng.lat() + ', ' +     event.latLng.lng();
  });
  google.maps.event.addListener(marker,'dragend', function(event) {
    updateMarkerPosition(marker.getPosition());
  });
}
function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map,
      animation: google.maps.Animation.DROP,
      draggable: true
    });
  }
}
window.onload = mapa

谢谢。