Google Maps v3, controllo personalizzato con casella di testo: impossibile eseguire l'input

Question

Sto tentando di aggiungere un controllo personalizzato alla mia mappa di google (v3): voglio avere una casella di ricerca vicino agli altri controlli della mappa. Quindi aggiungo un div con <input type="textbox"> su di esso e viene mostrato sulla mappa. Ma il problema è che la casella di testo non è accessibile: non riesco a digitare nulla al suo interno, né a concentrarmi su di essa.

function SearchBox() { 
    var searchTextBox = $('<input type="text" id="txtGeoSearch" />'); 

    var div = $('<div class="geoSearchBox"></div>') 
     .append($('<span>Search:</span>')) 
     .append(searchTextBox); 

    return div.get(0); 
} 

// inside init() 
geoMap.controls[google.maps.ControlPosition.TOP_LEFT].push(new SearchBox()); 

Quindi cosa devo fare per far funzionare la mia casella di testo come normale?

Answer 1

Opere per me: http://jsfiddle.net/cFpkt/