inserting a value into the html content of a google maps infowindow - google-maps-api-3

Question

I'v tried absolutely everything but I can't get this simple thing to work.
After clicking the marker, I'd like to insert a value into one of the input fields in the infowindow.
Eventually I would like to place the long / lat values of a newly placed marker, but after hours of trying I can not seem to even place a string value because I cannot find the selector to the input field id on the DOM.
Please find my code below. Any help would be much appreciated. Thanks.
[code]
var map;
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(31.267694, 17.341919);
var mapOptions = {
zoom: 3,
center: latlng,
minZoom:3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('google_map_div'), mapOptions);
map.setOptions({styles: styles});
var html = "<form class='form-horizontal' role='form' action='process_add_site.php' method='post' id='add_site_form' parsley-validate>" +
"<div class='editable_form'>" +
"<div class='form-group'>" +
"<label for='site_name' class='col-sm-2 control-label'>Name:</label>" +
"<div class='col-sm-10'>" +
"<input type='text' class='form-control input-lg' id='' placeholder='' name='site_name' required>" +
"</div>" +
"</div>" +
"<div class='form-group'>" +
"<label for='site_country' class='col-sm-2 control-label'>Country:</label>" +
"<div class='col-sm-10'>" +
"<input type='text' class='form-control input-lg' id='site_country' placeholder='' name='site_country' required>" +
"</div>" +
"</div>" +
"<div class='form-group'>" +
"<label for='site_state' class='col-sm-2 control-label'>State:</label>" +
"<div class='col-sm-10'>" +
"<input type='text' class='form-control input-lg' id='site_state' placeholder='' name='site_state' required>" +
"</div>" +
"</div>" +
"<div class='form-group'>" +
"<label for='site_lat' class='col-sm-2 control-label'>Latitude:</label>" +
"<div class='col-sm-10'>" +
"<input type='text' class='form-control input-lg' id='site_lat_val' placeholder='' name='site_lat' required>" +
"</div>" +
"</div>" +
"<div class='form-group'>" +
"<label for='site_lng' class='col-sm-2 control-label'>Longitude:</label>" +
"<div class='col-sm-10'>" +
"<input type='text' class='form-control input-lg' id='site_lng' placeholder='' name='site_lng' required>" +
"</div>" +
"</div>" +
"<div class='form-group'>" +
"<label for='add_site_country' class='col-sm-2 control-label'>Dive:</label>" +
"<div class='col-sm-10'>" +
"<select class='form-control input-lg' name='site_dive_type' id='site_dive_type' required>" +
"<option disabled='true'>Select type</option>" +
"<option>Dive Trainning</option>" +
"<option>Wreck Dive</option>" +
"<option>Cave Dive</option>" +
"<option>Deep Dive</option>" +
"<option>Drift Dive</option>" +
"<option>Snuba</option>" +
"<option>Free Dive</option>" +
"<option>Ice Dive</option>" +
"<option>Search & Recovery</option>" +
"<option>Commercial</option>" +
"</select>" +
"</div>" +
"</div>" +
"</div>" +
"<br/>" +
"<center><button class='btn btn-primary' type='submit' onclick='saveData()'/>Add Site</button></center></form>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
google.maps.document.id('site_lat_val').value="foo";
//marker_position = marker.getPosition();
//alert(marker_position);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
[/code]

Answer 1

Wait for the domready-event of infowindow before you access the element:
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
});
google.maps.event.addListener(marker, "click", function() {
google.maps.event.addListenerOnce(infowindow,'domready',function(){
document.getElementById('site_lat_val').value=event.latLng.lat();
});
infowindow.open(map, marker);
});
});