Google maps autocomplete not working inside modal popup

Question

I am using google maps api.I am trying to implement autocomplete address feature for input box.But the problem is in the page everything seems to work but the same is not working inside a modal popup.

Here is the html

    <div class="col-xs-5 col-sm-2 col-md-2">
    <a href="javascript:void(0)" data-ng-click="addlocationpopup()">+New 
    Location</a>
    </div> <!--button which calls popup -->

Here is the modal popup

    <div class="modal right fade addlocation" id="myModal_5" tabindex="-1"
    role="dialog" aria-labelledby="myModalLabel2" data-keyboard="false">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel1">ENTER LOCATION 
            DETAILS</h4>
        </div>
        <form name="locationForm" novalidate="novalidate" method="post">
            <div class="modal-body">
                <div class="row"> 
                  <div>
                  <input id="autocomplete" placeholder="Enter your address"
                  onFocus="geolocate()" type="text"></input>
                  </div>
                </div>
             </div>
         </form>
        </div>
       </div>
      </div>
    <script 
    src="https://maps.googleapis.com/maps/api/js?
    key=mykey&libraries=places&callback=initAutocomplete" async defer>
    </script>
    <script>
    var placeSearch, autocomplete;
    var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
   autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});
   autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
</script>

Controller . js :

    $scope.addlocationpopup = function(){
    $(".addlocation").modal("show");
    }

If in page i put one input box and type it is working fine.But inside modal it is not working that is the places are not showing when i type inside input box.I dont understand why it is not working inside popup as the scripts are already loaded when page gets loaded.Can anyone tell how to make it work inside modal popup?

Answer 1

The autocomplete suggested results are there but hidden underneath the popup/modal window which has a higher z-index value. To fix this issue, add the following CSS to your stylesheet:

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

Answer 2

For Angular 4+

::ng-deep .modal { z-index: 1001 !important;} 

::ng-deep .modal-backdrop {z-index: 1000 !important;}

::ng-deep .pac-container {z-index: 1055 !important;}

Answer 3

Finally I solved this problem.I used z-index css feature for displaying autocomplete addresses as i type inside input box like this

    <div class="modal right fade addlocation" id="myModal_5" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel2" data-keyboard="false" style="z-index:2;">

Now I am able to see the suggestions for addresses.

Answer 4

I was able to fix it by putting these lines:

<style>
.modal { z-index: 1001 !important;} 
.modal-backdrop {z-index: 1000 !important;}
.pac-container {z-index: 1055 !important;}
</style>

Answer 5

Try with following to the component scss file :

::ng-deep .pac-container {   
   z-index: 9999 !important;
}