Using jQuery in Google Maps infowindow

Question

I want to use the fcbk_autocomplete function I downloaded from http://www.emposha.com/javascript/fcbkcomplete.html in Google Maps infowindow.

Originally I have set the content of infowindow as shown below

var friends = document.getElementsByTagName('option'), 
    res = '';

for (var i = 0; i < friends.length; i++) {
    res = res + '<option value="'+friends[i].id+'">' + friends[i].value + '</option>';
}

var contentString = '<form method="post" action="mapit.do">' 
    + '<textarea name="comment" cols="40" rows="5">Enter your gossips here...</textarea><br>'
    + 'image url: <input type="text" cols="40" name="url"></input><br>'
    + '<input type="hidden" name="position" value="' + event.latLng.toUrlValue() + '"/>'
    + '<select id="select3" name="about">' + res + '</select>'
    + '<input type="submit" value="Submit" />'
    + '</form>';

options is a list of data I want to select from and they are stored in an invisible division.

After I open the infowindow, I tried to call the fcbkcomplete function by:

$("#select3").fcbkcomplete({
    addontab: true,                   
    maxitems: 10,
    input_min_size: 0,
    height: 10,
    cache: true,
    newel: true,
});

But it has no effect on the select3 section. I tried to call document.getElementById("select3") and it gives me null. My question is where can I call this function to make sure it sees the element with id select3?

Answer 1

It is hard to emulate without google maps loaded and everything, but I started a jsFiddle for you here.

The plugin you're attempting to use appears to be working in my context; however, that may not explain the behavior you've witnessed with attempting to use it within a gmap info window. Nevertheless, if you want you can add your gmap stuff to the javascript source and I can help you debug from there.