inserting a value into the html content of a google maps infowindow

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

          });
        });