Google maps does not work within bootstrap modal

0

Hello, everyone.

I'm developing a registry that uses the Maps API to find an address and I'm trying to use it within a modal, but when I put it inside the modal, it does not show the map or autocomplete the input field. p>

I'm using the example from this site

Here's 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><!--BootstrapJsCDN--><scriptsrc="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"asyncdefer></script>

Note:IfIremovethemapandinputfieldfromthemodalandplaceitsomewhereelseonthepage,itworkssmoothly.

Hasanyoneeverhadtodosomethinglikethisandsucceed?

IwouldbeverygratefulifIcouldresolvethis,asitisaveryimportantfunctioninthesoftware.

PS:Itookalook this topic, which has title I would like to know if there is a way to do this, but I do not know how to do that.     

asked by anonymous 23.05.2018 / 03:09

0 answers