Google Maps API、InfoWindow domreadyイベントハンドラでエラーが発生しました

Question

私は、位置情報データをcrowdsourcingするための情報インフォメーションウィンドウ内にフォームを設定しています。私はすべてを実行しているが、情報ウィンドウが開くときにlatとlngの値をフォーム要素にコピーしようとしています。

私は地図のdivの他のイベントリスナーで成功してきたが、私は情報ウィンドウのためのdomreadyイベントハンドラを使用するとき、私はエラーを取得する： 『_ E3』未定義のプロパティを読み取ることができません：」キャッチされない例外TypeErrorを"この問題は、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をミニフォームに配置することができます。私はフォームが置かれた後に、ドミールが本当に始まるかどうか疑問に思います。この機能を更新している私は何を示唆してい

：

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