web-dev-qa-db-fra.com

Google Maps Autocomplete Résultat dans Bootstrap Dialogue modal

J'ai un champ de saisie de saisie automatique Google Maps dans une boîte de dialogue modale Twitter Bootstrap et le résultat de la saisie semi-automatique ne s'affiche pas. Cependant, si j'appuie sur la flèche vers le bas, il sélectionne le résultat de saisie semi-automatique suivant, de sorte qu'il semble que le code de saisie semi-automatique fonctionne correctement, mais seulement que le résultat ne s'affiche pas correctement. Peut-être qu'il est caché derrière la boîte de dialogue modale?

Voici les captures d'écran:

Typing something in the autocomplete field gives nothing Taper quelque chose dans le champ de saisie semi-automatique ne donne rien

Pressing the arrow down key gives the first result Appuyer sur la touche fléchée vers le bas donne le premier résultat

Et le code:

<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>

J'ai fait de mon mieux pour résoudre ce problème par moi-même, mais comme je ne connais pas le code html & css pour le résultat de la saisie semi-automatique (l'élément inspect ne donne rien), je suis perdu maintenant. Des aides?

Merci avant!

javascripthtmlcssgoogle-maps-api-3twitter-bootstrap
64
Furunomoe

Le problème est avec le z-index du .modal

Utilisez ce balisage [~ # ~] css [~ # ~] :

.pac-container {
    background-color: #FFF;
    z-index: 20;
    position: fixed;
    display: inline-block;
    float: left;
}
.modal{
    z-index: 20;   
}
.modal-backdrop{
    z-index: 10;        
}​

Vous pouvez également consulter la démo finale ici

ps: merci à @lilina pour cette démo sur jsfiddle.com

104
Luis
.pac-container {
    z-index: 1051 !important;
}

l'a fait pour moi

https://github.com/twbs/bootstrap/issues/416

52
Vyacheslav Shevchenko

.modalz-index De Bootstrap est par défaut 1050.

l'interface jQuery UI .ui-autocompletez-index est par défaut 3.

Alors mettez ça sur le CSS:

/* Fix Bootstrap .modal compatibility with jQuery UI Autocomplete,
see http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog */
.ui-autocomplete {
    z-index: 1051 !important;
}

Fonctionne à merveille! :)

14
Rudi Wijaya

Fonctionné avec Bootstrap 3:

.pac-container {
  z-index: 1040 !important;
}
10
Pedro Casado

Dans mon scénario, la valeur de z-index du conteneur .pac sera init et remplacera par 1000, même si je l'ai définie en CSS. (éventuellement par google API?)

ma sale solution

$('#myModal').on('shown', function() {
     $(".pac-container").css("z-index", $("#myModal").css("z-index"));
}
4
vincentlcy

En général, vous pouvez simplement augmenter le z-index .pac-container à tout ce qui dépasse 1050 et vous n'aurez pas besoin des autres remplacements CSS.

J'ai découvert que ce problème existe également pour les boîtes de dialogue jQuery UI. Donc, au cas où cela finirait par être utile à quelqu'un d'autre, voici une référence rapide pour savoir où les modaux de l'interface utilisateur Bootstrap/jQuery vivent dans le plan z:

jQuery UI Dialog - z-index: 1001
Bootstrap Modal - z-index: 1050
4
Ryan Shih

Cela a fonctionné pour moi.

                   var pacContainerInitialized = false; 
                    $('#inputField').keypress(function() { 
                            if (!pacContainerInitialized) { 
                                    $('.pac-container').css('z-index','9999'); 
                                    pacContainerInitialized = true; 
                            } 
                    });
1
ash1103

Si vous utilisez Visual Studio, sur votre style.css page définit le z-index pour .modal à 20.

par exemple

.modal {
    z-index: 20 !important;
}
0
Jabulani Vilakazi

J'ai passé 2,3 heures à trouver l'erreur avec l'index z de la liste déroulante de l'API Google Adresses. Enfin, je l'ai trouvé. Collez simplement ce code en haut de votre script JS et mettez à jour le nom de l'ID d'entrée.

var pacContainerInitialized = false;
$("#inputField").keypress(function() {
  if (!pacContainerInitialized) {
    $(".pac-container").css("z-index", "9999");
    pacContainerInitialized = true;
  }
});

Lien de référence complet. https://groups.google.com/forum/#!topic/google-maps-js-api-v3/GZX0ynQNn1M Merci à Gautam.

0
Nasir ali