select2 not working when in google maps fullscreen

问题

I have a google map that a user can go into fullscreen mode. I add a div with a dropdown as controls to the map and I apply the select2 plugin to the dropdown. The problem is the select2 dropdown doesn't show the list when the map is in fullscreen mode, when the map is not in fullscreen mode the dropdown works correctly. There are no errors in the console. I tried changing the z-index but had no luck. Any ideas?

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

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"
  });
});

回答1:

Use this script after page load:

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

来源：https://stackoverflow.com/questions/41449002/select2-not-working-when-in-google-maps-fullscreen

标签

google-maps

google-maps-api-3

jquery-select2

select2