Google Maps Api, Error With Infowindow Domready Event Handler

I'm setting up a form within an info info window for crowd-sourcing location data. I've got everything up and running, but I'm trying to copy the lat and lng values into the form

Solution 1:

Alright, I did it without the timeout!

// Global Variablesvar map, markerWindow, newMarker;

functionplaceMarker() {
// Setup html form markup for marker pop-up infowindowvar html = '<div id="htmlform">' +
        '<form action="process.php" method="post" ' +
        'id="mapForm"> <fieldset> <label for="contact">' +
        'Email:</label><input type="text" name="contact"/>' +
        '<br/> <label for="date">Date:</label><input ' +
        'type="text" name="date"/><br/> <label for="desc">' +
        'Description of Sighting:</label><input type="text" ' +
        'name="desc"/><br/> <label for="lat">Latitude:</label>' +
        '<input type="text" name="lat" id="lat" class="location"/><br/>' +
        '<label for="lng">Longitude:</label><input type="text"' +
        'name="lng" id="lng" class="location"/><br/><input type="submit"' +
        'value="Post Sighting!" onclick="saveData()"/> </fieldset></form>' +
        '</div>';
    var newMarker = new google.maps.Marker( {
        draggable: true,
        map: map,
        animation: google.maps.Animation.DROP,
        title: "I'm draggable!",
    });
    var markerWindow = new google.maps.InfoWindow({
        content: html,
    }); 
    google.maps.event.addListener(map, "click", function(e) {
        newMarker.setPosition(e.latLng);
        markerWindow.open(map, newMarker);
        map.setCenter(e.latLng);
    });             
    google.maps.event.addListener(newMarker, 'dragstart', function() {
        markerWindow.close();
    });
    google.maps.event.addListener(newMarker, 'dragend', function(e) {
        newMarker.setPosition(e.latLng);
        markerWindow.open(map, newMarker);
    });
    google.maps.event.addListener(markerWindow, 'domready', function() {
      latLng = newMarker.getPosition();
      var lat = latLng.lat().toString();
      var lng = latLng.lng().toString();
      document.getElementById('lat').value = lat.slice(0,6);
      document.getElementById('lng').value = lng.slice(0,7);
    });
}
// Run when DOM window loadsfunctioninitialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'),{
        zoom: 8,
        center: new google.maps.LatLng(38.487, -75.641),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    placeMarker();
}

google.maps.event.addDomListener(window, 'load', initialize);

I have a different idea without the "domready" listener. I've seen another question where you need to wait a timeout after closing the Infowindow to prevent a click propagation. In your case, waiting some time after the InfoWindow is created allows the latLng to be placed in your mini-form. I wonder if the domready really fires after the form is placed or not.

What I'm suggesting is updating this function:

functionupdateMarkerPosition(latLng) {
    var lat = latLng.lat().toString();
    var lng = latLng.lng().toString();

    setTimeout(function() { 
      document.getElementById('lat').value = lat.slice(0,6);
      document.getElementById('lng').value = lng.slice(0,7);
    }, 200);
}