Google Maps v3, control personalizado con cuadro de texto: no se puede realizar la entrada

Question

Estoy tratando de agregar un control personalizado a mi mapa de google (v3): quiero tener el cuadro de búsqueda justo al lado de los otros controles del mapa. Entonces agrego un div con <input type="textbox"> en él, y se muestra en el mapa. Pero el problema es que el cuadro de texto es inaccesible: no puedo escribir nada dentro de él, ni siquiera enfocarme en él.

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

Entonces, ¿qué debo hacer para que mi cuadro de texto se comporte como uno normal?

Answer 1

Funciona para mí: http://jsfiddle.net/cFpkt/