Google Maps AutoComplete Not working after setting up

Question

I have looked at most of the questions on SO surrounding the topic of google maps autocomplete and have also looked at the docs. For some reason it seems like nothing is happening client side despite having the JS and HTML all set up. I have also looked into the developers console for errors and there are none.

Here is the included script tag I have:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY_HERE&libraries=places"></script>

html

 <div class="form-group row">
      <label for="example-text-input" class="col-sm-2 col-form-label">City</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" type="text" id="city" placeholder="San Francisco, Oakland, etc..">
      </div>
 </div>
<script>
function initialize() {
    var input = document.getElementById('city');
    var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

I have no idea what to do from here. Please let me know if there is any more information I can provide. Thanks in advance!

Answer 1

Ahh I found out the error. I have this autocomplete input box in a bootstrap modal and the autocomplete options were hidden behind the modal since it has a natural z-axis. To resolve this I just added some simple css:

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