Googleマップのフルスクリーンでselect2が動作しない

Question

ユーザーがフルスクリーンモードに移行できるGoogleマップがあります。私はマップにコントロールとしてドロップダウンを持つdivを追加し、ドロップダウンにselect2プラグインを適用します。問題はselect2のドロップダウンはマップがフルスクリーンモードのときにリストを表示せず、マップがフルスクリーンモードでなく、ドロップダウンが正しく機能するときです。コンソールにエラーはありません。私はZインデックスを変更しようとしましたが、運がありませんでした。何か案は？

JSFiddle Example

HTML

<div id="wrapper"> 
    <div id="testMap"> 
    </div> 
    <div id="inputControls" style="max-width: 275px"> 
    Select Country: 
    <select id="testDropdownList" class="full-width"> 
     <option value="-1">-- Select --</option> 
     <option value="1">Test 1</option> 
     <option value="2">Test 2</option> 
     <option value="3">Test 3</option> 
    </select> 
    </div> 
</div> 

CSS

#wrapper { 
    position: relative; 
} 

#inputControls { 
    position: absolute; 
    margin-left: 10px; 
    top: 85px; 
    left: -5px; 
    background-color: white; 
    color: black; 
    z-index: 10; 
    padding: 8px; 
    font-size: 8pt; 
    font-family: Roboto; 
    font-weight: normal; 
    border-top-right-radius: 2px; 
    border-top-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
    border-bottom-left-radius: 2px; 
} 

#inputControls input { 
    font-size: 8pt; 
    font-family: Roboto; 
} 

#testMap { 
    width: 100%; 
    height: 500px; 
    position: relative; 
    left: -15px; 
} 

#testDropdownList { 
    font-size: 8pt; 
} 

JS

function initMap() { 
    var mapOptions = { 
    center: { 
     lat: 38.907192, 
     lng: 17.036871 
    }, 
    zoom: 2, 
    fullscreenControl: true 
    }; 

    testMap = new google.maps.Map(document.getElementById('testMap'), mapOptions); 
    testMap.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('inputControls')); 

} 

$(document).ready(function() { 


    initMap(); 

    $('#testDropdownList').select2({ 
    theme: "bootstrap" 
    }); 
}); 

Answer 1

ページのロード後にこのスクリプトを使用します。

Array.from(document.getElementsByClassName("pac-container pac-logo hdpi")).forEach(function(item) { 
    item.style.zIndex = 2147483647; 
});