Google Maps v3, custom control with textbox: can't perform input

Question

I am trying to add a custom control to my google map (v3): I want to have search box just near the other map controls. So I add a div with <input type="textbox"> on it, and it's being shown on the map. But the problem is that the textbox is inaccessible: I can't type anything inside it, or even focus on it.

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

So what should I do to make my textbox behave like normal one?

Answer 1

Works for me: http://jsfiddle.net/cFpkt/