Google maps does not work within the bootstrap modal

Question

Hello, everybody.

I’m developing a register that uses the Google Maps API to find an address and I’m trying to use it within a modal, but when I put inside the modal, it doesn’t show the map and doesn’t auto-complete the input field.

I’m using the example of this website

Here is my code:

<!-- Modal de cadastro  -->
    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
              <h3 class="modal-title" id="exampleModalLongTitle">Cadastrar uma nova carona</h3>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <!-- Formulário para adicionar uma nova carona -->
              <form>
                <!-- Quer dar carona ou receber carona? -->
                <div class="form-group">
                    <label for="statuscarona">Deseja oferecer carona ou pegar uma carona?</label>
                    <select class="form-control" name="statuscarona" id="statuscarona">
                        <option value="oferecer">Quero oferecer carona</option>
                        <option value="receber">Quero pegar uma carona</option>
                    </select>
                </div>

                <!-- Local de partida -->
                <div class="form-group">
                    <label for="origem">Digite o endereço de origem</label>
                    <input type="text" name="origem" class="form-control" id="origem" placeholder="Ex: Rua T-26, N 256">
                </div>

                <div class="form-group">
                  <input id="pac-input" class="controls" type="text" placeholder="Search Box">
                  <div id="map"></div>
                </div>

                <!-- Destino -->
                <div class="form-group">
                    <label for="destino">Digite o endereço de destino</label>
                    <input type="text" name="destino" class="form-control" id="destino" placeholder="Ex: Universidade Federal de Goiás">
                </div>

                <!-- Horário -->
                <div class="form-group">
                    <label for="horario">Horário</label>
                    <input type="text" name="horario" class="form-control" id="horario" placeholder="Ex: 11:30">
                </div>

                <!-- Repetir? -->
                <div class="form-group">
                    <label for="">Repetir?</label>
                    <div class="form-check">

                       <input type="checkbox" class="form-check-input" id="segunda">
                       <label class="form-check-label">Segunda</label>

                       <input type="checkbox" class="form-check-input ml-1" id="terca">
                       <label class="form-check-label">Terça</label>

                       <input type="checkbox" class="form-check-input ml-1" id="quarta">
                       <label class="form-check-label">Quarta</label>

                       <input type="checkbox" class="form-check-input ml-1" id="quinta">
                       <label class="form-check-label">Quinta</label>

                       <input type="checkbox" class="form-check-input ml-1" id="sexta">
                       <label class="form-check-label">Sexta</label>

                       <input type="checkbox" class="form-check-input ml-1" id="sabado">
                       <label class="form-check-label">Sábado</label>

                       <input type="checkbox" class="form-check-input ml-1" id="domingo">
                       <label class="form-check-label">Domingo</label>

                    </div>
                </div>

              </form>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
              <button type="button" class="btn btn-primary">Adicionar</button>
            </div>
        </div>
      </div>
    </div>


    <!-- jQuery CDN -->
     <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
     <!-- Bootstrap Js CDN -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

     <script type="text/javascript">
         $(document).ready(function () {
             $('#sidebarCollapse').on('click', function () {
                 $('#sidebar').toggleClass('active');
             });
         });

         function initAutocomplete() {
             var map = new google.maps.Map(document.getElementById('map'), {
               center: {lat: -33.8688, lng: 151.2195},
               zoom: 13,
               mapTypeId: 'roadmap'
             });

             // Create the search box and link it to the UI element.
             var input = document.getElementById('pac-input');
             var searchBox = new google.maps.places.SearchBox(input);
             map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

             // Bias the SearchBox results towards current map's viewport.
             map.addListener('bounds_changed', function() {
               searchBox.setBounds(map.getBounds());
             });

             var markers = [];
             // Listen for the event fired when the user selects a prediction and retrieve
             // more details for that place.
             searchBox.addListener('places_changed', function() {
               var places = searchBox.getPlaces();

               if (places.length == 0) {
                 return;
               }

               // Clear out the old markers.
               markers.forEach(function(marker) {
                 marker.setMap(null);
               });
               markers = [];

               // For each place, get the icon, name and location.
               var bounds = new google.maps.LatLngBounds();
               places.forEach(function(place) {
                 if (!place.geometry) {
                   console.log("Returned place contains no geometry");
                   return;
                 }
                 var icon = {
                   url: place.icon,
                   size: new google.maps.Size(71, 71),
                   origin: new google.maps.Point(0, 0),
                   anchor: new google.maps.Point(17, 34),
                   scaledSize: new google.maps.Size(25, 25)
                 };

                 // Create a marker for each place.
                 markers.push(new google.maps.Marker({
                   map: map,
                   icon: icon,
                   title: place.name,
                   position: place.geometry.location
                 }));

                 if (place.geometry.viewport) {
                   // Only geocodes have viewport.
                   bounds.union(place.geometry.viewport);
                 } else {
                   bounds.extend(place.geometry.location);
                 }
               });
               map.fitBounds(bounds);
             });
           }
     </script>

      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZlhUSjqeKmEXWMqpOV1sNKIs18dKfPgc&libraries=places&callback=initAutocomplete"
     async defer></script>

Note: If I remove the map and input field from the modal and put it elsewhere on the page, there works smoothly.

Someone once had to do something like that?

I would be very grateful if I could solve this, because it is a very important function in software.

PS: I took a look in this topic, which has similar title here at stackoverflow, but the answer that’s there is about the key of the API, and I generated a key, works normally outside the modal, but not inside the modal.

Answer 1

The problem you’re having happens because the list of locations that appears below the search field is rendered behind the modal, making it impossible to see, so to solve this is just "put it forward" with CSS:

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