Question

I’ve got an HTML form in a Google Maps info window that uses the jQuery validation plugin. When it displays error messages (I’ve moved them under the form input) the div with the form overflows the info window.

I’ve read responses to similar questions, but I haven’t gotten a fix with any of those solutions.

HTML form:

<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

First: you must ensure that the new content will always fit into the infoWindow(an infoWindow can’t be larger than the map)

The issue: when the validation-plugin modifies the contents, the content_changed-event of the infoWindow will not fire(but this is required for resizing the infoWindow)

It will not be sufficient to trigger the content_changed-event of the infoWindow, this will reset the contents to the current content-property of the infoWindow(which didn’t change when your plugin modifies the content)

So you must set the content after the plugin modified the markup by setting the content to the current subTree inside the infoWindow. Sounds complicated, but isn’t:

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

This will not have any effect to the DOM, but it will:

1. set the content-property of the infoWindow to the current contents
2. fire the content_changed-event, so the infoWindow should be resized.