Google Maps автозаполнение результат в модальном диалоговом окне начальной загрузки

у меня есть поле ввода автозаполнения Google Maps внутри модального диалогового окна Twitter Bootstrap, и результат автозаполнения не отображается. Однако, если я нажимаю клавишу со стрелкой вниз, он выбирает следующий результат автозаполнения, поэтому кажется, что код автозаполнения работает правильно, только что результат отображается неправильно. Может быть, это скрыто за модальным диалогом?

вот скриншоты :

Ввод чего-то в поле автозаполнения дает ничего

Нажатие клавиши со стрелкой вниз дает первый результат

и код :

<div class="modal hide fade" id="map_modal">
<div class="modal-body">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <div class="control-group">
        <label class="control-label" for="keyword">Cari alamat :</label>
        <div class="controls">
            <input type="text" class="span6" name="keyword" id="keyword">
        </div>
    </div>
    <div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>

<script type="text/javascript">
$("#map_modal").modal({
    show: false
}).on("shown", function()
{
    var map_options = {
        center: new google.maps.LatLng(-6.21, 106.84),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-6, 106.6),
        new google.maps.LatLng(-6.3, 107)
    );

    var input = document.getElementById("keyword");
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo("bounds", map);

    var marker = new google.maps.Marker({map: map});

    google.maps.event.addListener(autocomplete, "place_changed", function()
    {
        var place = autocomplete.getPlace();

        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);
        }

        marker.setPosition(place.geometry.location);
    });

    google.maps.event.addListener(map, "click", function(event)
    {
        marker.setPosition(event.latLng);
    });
});
</script>

Я старался изо всех сил решить это самостоятельно, но поскольку я не знаю html&css для результата автозаполнения (inspect element ничего не дает), я сейчас потерян. Какая-нибудь помощь?

спасибо раньше!