javascript - google maps V3 - populate text field with marker data?

Question

I am trying to populate text fields with the lng, lat where a marker is placed. I had this working in v2 and I'm trying to upgrade to v3 - having a hard time. Here's my code:

Map code:

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();



function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    myListener = google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng); google.maps.event.removeListener(myListener);

  });



  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag === true) {
      alert("Geolocation service failed.");
      initialLocation = newyork;
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
      initialLocation = siberia;
    }
  }



  function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location, 
      map: map,
      draggable: true


  });

  map.setCenter(location);

}
}

Here's the code I'm (trying) to use to populate the text fields:

var markerPosition = marker.getPosition();
var markerLatitude = markerPosition.lat();
var markerLongitute = markerPosition.lng();

 var lat = markerPosition.lat(), lng = markerPosition.lng();
document.getElementById("t1").value=lat;
document.getElementById("t2").value=lng;

Answer 1

Well, just have a function to populate the inputs within the placeMarker function: Example Link

I've also noted that you are enabling dragging on your marker so I've added a drag event listener to populate the inputs accordingly (inside the placeMarker function).

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true
    });
    map.setCenter(location);
    var markerPosition = marker.getPosition();
    populateInputs(markerPosition);
    google.maps.event.addListener(marker, "drag", function (mEvent) {
        populateInputs(mEvent.latLng);
    });
}
function populateInputs(pos) {
    document.getElementById("t1").value=pos.lat()
    document.getElementById("t2").value=pos.lng();
}