Google Maps API v3, проверка HTML-формы в информационном окне с динамическим изменением размера

Question

У меня есть HTML-форма в информационном окне Google Maps, которая использует плагин проверки jQuery.Когда он отображает сообщения об ошибках (я переместил их под вход формы), div с формой переполняет информационное окно.

Я прочитал ответы на подобные вопросы, но я не получил исправления слюбое из этих решений.

HTML-форма:

<div id="formDiv">
  <form action="addRow.php" method="post"id="htmlForm">
     <fieldset>
        <p id="contactP">
          <label for="contact">Email:</label>
          <input type="text" name="contact" id="contact"/> <br/>
        </p>
        <p id="dateP">
          <label for="datepicker">Date:</label>
          <input type="text" name="date" id="datepicker"/> <br/>
        </p>
        <p id="latP">
          <label for="lat">Latitude:</label>
          <input type="text" name="lat" id="lat" class="location"/> <br/>'+
        </p>
        <p id="lngP">
          <label for="lng">Longitude:</label>
          <input type="text" name="lng" id="lng" class="location"/> <br/>
        </p>
        <p id="descP">
          <label for="desc" id="dos">Description of Sighting:</label> <br/>
          <textarea name="desc" id="desc"></textarea><br/>
        </p>

          <input type="submit" class="button" id="submitBtn" value="Post Sighting!" onclick="postSighting();"/>'+
      <p class="clear"></p>'+
     </fieldset></form></div>

;

jQuery:

$('#htmlForm').validate({
    rules: {
        contact: {required:true, email:true},
        date: {required:true},
        lat: {required:true},
        lng: {required:true},
        desc: {required:true},
    },
    messages: {
        desc: 'Please be descriptive!'
    },
    errorPlacement: function(error, element) {
        error.appendTo($('#' + element.attr('id') + 'P'));
        if (element.attr('id') == 'desc') {
            error.css({
                text_align: 'center',
                color: 'red',
                padding: 45,
            });
        } else {
            error.css({
                color: 'red',
                padding: 10,
                margin:0,
            })};
    }
});

Answer 1

Во-первых: вы должны убедиться, что новый контент всегда будет вписываться в информационное окно (информационное окно не может быть больше карты)

Проблема: когда плагин проверки изменяет содержимое, content_changed-event информационного окна не будет запускаться (но это необходимо для изменения размера информационного окна)

Недостаточно инициировать событие content_changed-объекта информационного окна, это приведет к сбросу содержимого в текущее свойство содержимогоинформационного окна (которое не изменилось, когда ваш плагин изменяет содержимое)

Таким образом, вы должны установить содержимое после того, как плагин изменил разметку, установив для содержимого текущее поддерево внутри информационного окна.Звучит сложно, но не так:

infowindowObject.setContent(document.getElementById('formDiv'));

Это не окажет никакого влияния на DOM, но оно будет:

1. установить свойство content объекта infoWindow натекущее содержимое
2. запускает событие content_changed, поэтому необходимо изменить размер окна информации.