Question

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 elements when the info window pops open.

I’ve been successful with other event listener on the map div, but when I use the domreadyevent handler for the info window I get an error:

“Uncaught TypeError: Cannot read property ‘__e3_’ of undefined.”

The issue seems to be within the domready event listener.

// Global Variables
var map, markerWindow, newMarker;

function updateMarkerPosition(latLng) {
    alert(latLng);
    var lat = latLng.lat().toString();
    var lng = latLng.lng().toString();
    google.maps.event.addListener(markerWindow, "domready", function() {
        alert(latLng); // debug alert
        document.getElementById('lat').value = lat.slice(0,6);
        document.getElementById('lng').value = lng.slice(0,7);
    });
}
function placeMarker() {
// Setup html form markup for marker pop-up infowindow
    var 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);
        updateMarkerPosition(newMarker.getPosition());
    });             
    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);
        updateMarkerPosition(newMarker.getPosition());
    });
}
// Run when DOM window loads
function initialize() {
    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);

Answer 1

Alright, I did it without the timeout!

// Global Variables
var map, markerWindow, newMarker;

function placeMarker() {
// Setup html form markup for marker pop-up infowindow
    var 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 loads
function initialize() {
    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:

function updateMarkerPosition(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);
}