Google Maps API, ошибка с обработчиком событий InfoWindow domready

Question

Я настраиваю форму в информационном информационном окне для краудсорсинга данных о местоположении.У меня все работает, но я пытаюсь скопировать значения lat и lng в элементы формы, когда открывается информационное окно.

Я успешно справился с другим приемником событий на картеdiv, но когда я использую обработчик событий domready для информационного окна, я получаю сообщение об ошибке: «Uncaught TypeError: Невозможно прочитать свойство _ _ ​​1003 * e3 'undefined».Кажется, проблема в приемнике событий domready.

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

Хорошо, я сделал это без таймаута!

// 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);

У меня другая идея без слушателя "domready".Я видел еще один вопрос, где вам нужно подождать тайм-аут после закрытия окна Infowindow, чтобы предотвратить распространение кликов.В вашем случае ожидание через некоторое время после создания InfoWindow позволяет поместить latLng в вашу мини-форму.Интересно, действительно ли domready срабатывает после размещения формы или нет.

Я предлагаю обновить эту функцию:

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);
}