如何获取Google Maps API v3来侦听dragend事件并在拖放时填充表单字段？

Question

I am trying to get the lat and lng of a clicked location on a Google map, which I will then store in a db. I've gotten it to the point where I can click on the map location and the form field populates, but I'd also like to be able to drag and drop the marker to a new location and update the form field on the dragend event. Any idea how to accomplish this?

The 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>

The 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

Thank you.

Answer 1

1. you must add the dragend -event at the end of the else-branch in placeMarker() , at the current position marker is undefined when you add the listener
2. in updateMarkerPosition() you set the innerHTML of a text-input(what usually will not have any effect), set the value instead