Google Mapsオートコンプリートの結果ブートストラップモーダルダイアログ

Question

Twitterブートストラップモーダルダイアログ内にGoogle Maps Autocomplete入力フィールドがあり、オートコンプリート結果が表示されません。ただし、下矢印キーを押すと次のオートコンプリート結果が選択されるため、オートコンプリートコードが正しく機能し、結果が正しく表示されないように見えます。モーダルダイアログの後ろに隠れているのでしょうか？

は、ここでのスクリーンショットです：

<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を知らないので、私は今、失われた中です。どんな助け？

ありがとうございました！

Answer 1

問題が.modal

利用z-indexこの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;   
}​ 

また、あなたが最終的なデモhere

PSを確認することができますjsfiddle.comのそのデモのためのlilina

Answer 2

一般に、.pac-containerのz-indexは1050を超えるものにバンプするだけで、他のCSSの上書きは必要ありません。

この問題はjQuery UIダイアログにも存在することがわかりました。だから、それは他の誰にも役立つなってしまう場合には、ここでブートストラップ/ jQueryのUIのモーダルがz平面に住んでいる場所のクイックリファレンスです：

jQuery UI Dialog - z-index: 1001 
Bootstrap Modal - z-index: 1050 

Answer 3

ブートストラップの.modalz-indexはデフォルトである1050

jQueryのUIの.ui-autocompletez-indexはデフォルトである3

ので、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; 
} 

W orksの驚異！ :)

Answer 4

私のシナリオでは、.pac-containerのz-indexの値はinitになり、CSSで設定しても1000に上書きされます。 （おそらくGoogle APIによって？）

私の汚い修正ブートストラップ3と働い

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

Answer 5

：Visual Studioを使用している場合

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

Answer 6

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

は、私のため

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

Answer 7

をやりましたにあなたのstyle.cssページでは、これが私のために働い例えば

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

Answer 8

に.modalためz-indexを設定します。

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