Вставка значения в html-содержимое google maps infowindow

Question

I'v попробовал абсолютно все, но я не могу получить эту простую вещь для работы.

После нажатия маркера, я хотел бы вставить значение в одно из полей ввода в infowindow.

В конце концов, я хотел бы поместить длинные/лат значения вновь помещенного маркера, но после нескольких часов попыток я не могу даже представить строковое значение, потому что я не могу найти селектор для идентификатора поля ввода на DOM ,

Пожалуйста, найдите мой код ниже. Любая помощь приветствуется. Благодарю.

[код]

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

[/ код]

Answer 1

Подождите, domready -Event из infowindow, прежде чем получить доступ к элементу:

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

      }); 
     });