1. Accueil
  2. Question et réponse
  3. Les onglets Bootstrap avec l'API Google Map ne se chargent pas complètement

Les onglets Bootstrap avec l'API Google Map ne se chargent pas complètement

2017-08-28 6 views
1

J'essaie d'utiliser l'API Google Maps dans un onglet Bootstrap. Lorsque la carte est dans le premier onglet, il se charge correctement, mais je dois le déplacer vers le deuxième onglet en raison de considérations d'interface utilisateur. Quand je fais cela, la carte ne complète pas son chargement. J'utilise une classe appelée "appt-lo" pour déclencher le premier onglet à montrer actif. Si je déplace cette classe vers le deuxième onglet, ma carte montre, sinon, ce n'est pas le cas. Si vous pouviez me donner des idées ou me diriger dans la bonne direction, je vous en serais reconnaissant.Les onglets Bootstrap avec l'API Google Map ne se chargent pas complètement

Codepen: https://codepen.io/madjaybird/pen/YxJErx?editors=1000

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.madjaybird.com/Codepen/main.js"></script> 
 
<link href="https://www.madjaybird.com/Codepen/main.css" rel="stylesheet" /> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <title>Inline Online - The Online Appointment Scheduler for NM MVD</title> 
 
    <link rel="stylesheet" href="dist/styles/main.css"> 
 
    <link href='https://fonts.googleapis.com/css?family=Palanquin:400,300,100,200,500,600,700' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body class="intro wizard"> 
 
    <div id="header" role="banner"> 
 
    <nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top justify-content-between"> 
 
     <a class="navbar-brand" href="http://mvd.newmexico.gov"><span>MVD</span> NEW MEXICO</a> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
     </button> 
 
     <div class="collapse navbar-collapse" id="navbarToggler"> 
 
     <ul class="navbar-nav flex-row ml-auto d-none d-flex"> 
 
      <li class="nav-item pr-2 pt-2" id="time">15:00<span> minutes</span></li> 
 
      <li class="nav-item pr-2"><a class="nav-link" href="admin-calendar-month-0817.html"><i class="fas fa-home"></i> Admin Home</a></li> 
 
      <li class="nav-item pr-2"><a class="nav-link" href="admin-help.html"><i class="fas fa-question-circle"></i> Help</a></li> 
 
      <li class="nav-item pr-2"><a class="nav-link" href="admin-signin.html"><i class="fas fa-sign-out-alt"></i> Log Out</a></li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="row justify-content-center mt-6"> 
 
     <div class=" card wizard-card"> 
 
     <div class="wizard-header"> 
 
      <h3> 
 
      <b>MAKE</b> YOUR APPOINTMENT<br> 
 
      </h3> 
 
     </div> 
 
     <ul class="justify-content-around nav nav-tabs nav-fill setup-panel"> 
 
      <li class="nav-item"><a class="btn-default nav-link link appt-lo" href="#step-1">Appointment Type</a></li> 
 
      <li class="nav-item"><a class="btn-default nav-link link" href="#step-2">Appointment Location</a></li> 
 
      <li class="nav-item"><a class="btn-default nav-link link" href="#step-3">Date &amp; Time</a></li> 
 
      <li class="nav-item"><a class="btn-default nav-link link" href="#step-4">Add Appointment</a></li> 
 
      <li class="nav-item"><a class="btn-default nav-link link" href="#step-5">Customer Information</a></li> 
 
     </ul> 
 

 
     <form role="form" action="" method="post"> 
 

 

 
      <!-- Step 1: Appointment Type --> 
 
      <div class="row setup-content" id="step-1"> 
 
      <div class="col mt-4"> 
 
       <div class="row mx-1 mb-4"> 
 
       <div class="col-6"> 
 
        <h4 class="info-text"> Select Your Appointment Type </h4> 
 
       </div> 
 
       <div class="col-6"> 
 
        <div class="btn-group float-right" role="group" aria-label="Basic example"> 
 
        <button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button> 
 
        <button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <hr class="my-2"> 
 
       <div class="row"> 
 
       <div class="col"> 
 
       </div> 
 
       </div> 
 
       <div class="d-flex flex-row flex-wrap justify-content-center"> 
 
       <div class="cards p-2"> 
 
        <div class="card1 has-overlay"> 
 
        <div class="overlay-card select"> 
 
         <div class="choice" data-toggle="wizard-checkbox"> 
 
         <input type="checkbox" name="jobb" value="Code"> 
 
         <div class="icon"> 
 
          <i class="fas fa-id-card"></i> 
 
         </div> 
 
         <h6 class="mt-2">First Time <br>Driver's License</h6> 
 
         <small class="text-center"><a href="http://www.mvd.newmexico.gov/apply-for-new-driver-s-license.aspx" target="_blank">Required Documents</a></small> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <div class="cards p-2"> 
 
        <div class="has-overlay"> 
 
        <div class="overlay-card select"> 
 
         <div class="choice" data-toggle="wizard-checkbox"> 
 
         <input type="checkbox" name="jobb" value="Code"> 
 
         <div class="icon"> 
 
          <i class="fas fa-file-alt"></i> 
 
         </div> 
 
         <h6 class="mt-2">First TIme Title</h6> 
 
         <small class="text-center"><a href="http://www.mvd.newmexico.gov/how-to-title-a-vehicle.aspx#" target="_blank">Required Documents</a></small> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <div class="cards p-2"> 
 
        <div class="has-overlay"> 
 
        <div class="overlay-card select"> 
 
         <div class="choice" data-toggle="wizard-checkbox"> 
 
         <input type="checkbox" name="jobb" value="Code"> 
 
         <div class="icon"> 
 
          <i class="fas fa-search"></i> 
 
         </div> 
 
         <h6 class="mt-2">VIN Inspection</h6> 
 
         <small class="text-center"><a href="http://www.mvd.newmexico.gov/register-your-vehicle.aspx" target="_blank">Required Documents</a></small> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <div class="d-flex flex-row flex-wrap justify-content-center"> 
 
       <div class="cards p-2"> 
 
        <div class="has-overlay"> 
 
        <div class="overlay-card select"> 
 
         <div class="choice" data-toggle="wizard-checkbox"> 
 
         <input type="checkbox" name="jobb" value="Code"> 
 
         <div class="icon"> 
 
          <i class="fas fa-road"></i> 
 
         </div> 
 
         <h6 class="mt-2">Road Test</h6> 
 
         <small class="text-center"><a href="http://www.mvd.newmexico.gov/apply-for-new-driver-s-license.aspx" target="_blank">Required Documents</a></small> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <div class="cards p-2"> 
 
        <div class="has-overlay"> 
 
        <div class="overlay-card select"> 
 
         <div class="choice" data-toggle="wizard-checkbox"> 
 
         <input type="checkbox" name="jobb" value="Code"> 
 
         <div class="icon"> 
 
          <i class="fa fa-motorcycle"></i> 
 
         </div> 
 
         <h6 class="mt-2">Motorcycle <br>Road Test</h6> 
 
         <small class="text-center"><a href="http://www.mvd.newmexico.gov/apply-for-new-driver-s-license.aspx" target="_blank">Required Documents</a></small> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <div class="cards p-2"> 
 
        <div class="has-overlay"> 
 
        <div class="overlay-card select"> 
 
         <div class="choice" data-toggle="wizard-checkbox"> 
 
         <input type="checkbox" name="jobb" value="Code"> 
 
         <div class="icon"> 
 
          <i class="fas fa-shield-alt"></i> 
 
         </div> 
 
         <h6 class="mt-2">Fingerprinting</h6> 
 
         <small class="text-center"><a href="http://www.dps.state.nm.us/index.php/fingerprint-information/" target="_blank">Required Documents</a></small> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <hr> 
 
       <div class="row mx-1 mb-4"> 
 
       <div class="col-6"> 
 
        <h4 class="info-text"></h4> 
 
       </div> 
 
       <div class="col-6"> 
 
        <div class="btn-group float-right" role="group" aria-label="Basic example"> 
 
        <button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button> 
 
        <button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button> 
 
        </div> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 
      <!-- Step 2: Location --> 
 
      <div class="row justify-content-center setup-content" id="step-2"> 
 
      <div class="col text-center mt-4"> 
 
       <div class="row mx-1 mb-4"> 
 
       <div class="col-6"> 
 
        <img src="dist/images/MVDlogo.png" alt="MVD NM logo" class="step2" width="80"> 
 
        <h4 class="info-text"> Find an MVD Field Office near you.</h4> 
 
       </div> 
 
       <div class="col-6"> 
 
        <div class="btn-group float-right" role="group" aria-label="Basic example"> 
 
        <button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button> 
 
        <button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button> 
 
        </div> 
 
       </div> 
 
       </div> 
 

 

 
       <div class="row my-4 mx-4"> 
 
       <div class="col-sm-8"> 
 
        <div class="thumbnail map-wrapper"> 
 
        <div id="map-canvas"> 
 
         <div id="map"> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-sm"> 
 
        <div> 
 
        <div id="maps"> 
 
         <p>To find an MVD Service Provider near you, enter your City or ZIP Code.</p> 
 
         <div class="form-group"> 
 
         <label class="sr-only">City/ZIP Code</label> 
 
         <div class="input-group input-group-sm"> 
 
          <input type="text" class="form-control" placeholder="Search for..."> 
 
          <span class="input-group-btn"> 
 
          <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> 
 
          </span> 
 
         </div> 
 
         </div> 
 
        </div> 
 
        <div class="location text-left"> 
 
         <h5><strong>Select Location:</strong></h5> 
 
         <div class="address"><a href="#">Santa Fe</a></div> 
 
         <div>2546 Camino Entrada</div> 
 
         <div>Santa Fe, NM 87507</div> 
 
         <div>505-476-1599</div> 
 
         <div> Monday - Friday 8am - 4pm</div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <div class="col"> 
 
       <hr> 
 
       </div> 
 
       <div class="col"> 
 
       <button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <!-- Step 3: Date & Time --> 
 
      <div class="row setup-content" id="step-3"> 
 
      <div class="col mt-4"> 
 
       <div class="row mx-1 mb-4"> 
 
       <div class="col"> 
 
        <button class="btn btn-primary prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button> 
 
       </div> 
 
       <div class="col"> 
 
        <h4 class="info-text"> Select Date &amp; Time </h4> 
 
       </div> 
 
       <div class="col"> 
 
        <button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button> 
 
       </div> 
 
       </div> 
 

 
       <div class="row"> 
 
       <div class="col-sm"> 
 
        <div class="location text-center"> 
 
        <div class="address">Santa Fe</div> 
 
        <div>2546 Camino Entrada Santa Fe, NM 87507 </div> 
 
        <div>505-476-1599 Monday - Friday 8am - 4pm</div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <hr class="mb-0"> 
 
       <div class="row justify-content-center"> 
 
       <div class="col-sm"> 
 
        <p class="text-center">Please select the date and the time for your appointment.</p> 
 
       </div> 
 
       </div> 
 
       <div class="row mx-4"> 
 
       <div class="col-sm mt-2"> 
 
        <div class="form-group"> 
 
        <label class="control-label">Date of Appointment: </label> 
 
        <input class="form-control date-picker" type="date" /> 
 
        </div> 
 
       </div> 
 
       <div class="col-sm block_list_words mt-2"> 
 
        <label class="control-label">Time of Appointment: </label> 
 
        <ul id="handle-1" class="list-unstyled"> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 9:00 am<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 9:30 am<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 10:00 am<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 10:30 am<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 11:00 am<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 11:30 am<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 12:00 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 12:30 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 1:00 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 1:30 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 2:00 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 3:00 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 3:30 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 4:00 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        <li class="datetime"> 
 
         <span class="drag-handle"><i class="fas fa-clock"></i></span> 4:30 pm<span class="float-right sortable-links"></span> 
 
        </li> 
 
        </ul> 
 
       </div> 
 
       </div> 
 
       <div class="col"> 
 
       <hr> 
 
       <button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button> 
 
       </div> 
 
       <div class="col"> 
 
       <button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <!-- Step 4: Add Appointment --> 
 
      <div class="row setup-content" id="step-4"> 
 
      <div class="col mt-4"> 
 
       <div class="row mx-1 mb-4"> 
 
       <div class="col"> 
 
        <button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button> 
 
       </div> 
 
       <div class="col"> 
 
        <h4 class="info-text"> Make Another Appointment </h4> 
 
       </div> 
 
       <div class="col"> 
 
        <button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button> 
 
       </div> 
 
       </div> 
 
       <div class="row justify-content-center ml-0 mt-4"> 
 
       <div class="col text-center"> 
 
        <p class="lead">Would you like to make another appointment?</p> 
 
        <p class=" mb-4"> If so, click the <b>MAKE ANOTHER APPOINTMENT</b> button below. If not, click <b>NEXT</b>.</p> 
 
        <button type="button" class="btn btn-secondary btn-sm" onclick="window.location.href='ui-wizard.html'">Make Another Appointment</button> 
 
       </div> 
 
       </div> 
 
       <div class="col"> 
 
       <hr> 
 
       <button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button> 
 
       </div> 
 
       <div class="col"> 
 
       <button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <!-- Step 5: Customer Information --> 
 
      <div class="row setup-content" id="step-5"> 
 
      <div class="col mt-4"> 
 
       <div class="row mx-1 mb-4"> 
 
       <div class="col"> 
 
        <button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button> 
 
       </div> 
 
       <div class="col"> 
 
        <h4 class="info-text"> Enter Your Information </h4> 
 
       </div> 
 
       <div class="col"> 
 
        <button class="btn btn-secondary nextBtn btn-lg float-right" type="submit" onclick="window.location.href='ui-review.html'">Finish <i class="fal fa-arrow-right"></i></button> 
 
       </div> 
 
       </div> 
 
       <div class="mx-4"> 
 
       <form class="container" id="needs-validation" novalidate> 
 
        <div class="row"> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
         <span class="text-red">*</span> 
 
         <label for="firstName"> First Name</label> 
 
         <input name="firstname" type="text" class="form-control" id="firstName" placeholder="First Name" required> 
 
         <div class="invalid-feedback"> 
 
          Please enter a first name. 
 
         </div> 
 
         </div> 
 
        </div> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
         <span class="text-red">*</span> 
 
         <label for="lastName"> Last Name</label> 
 
         <input name="lastname" type="text" class="form-control" id="lastName" placeholder="Last Name" required> 
 
         </div> 
 
        </div> 
 
        </div> 
 
        <div class="row"> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
         <span class="text-red">*</span> 
 
         <label> Email</label> 
 
         <input name="email" type="email" class="form-control" id="email" placeholder="Email" required> 
 
         </div> 
 
        </div> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
         <span class="text-red">*</span> 
 
         <label> Phone </label> 
 
         <input name="phone" type="tel" class="form-control" id="phone" placeholder="Phone" required> 
 
         </div> 
 
        </div> 
 
        </div> 
 
        <div class="row"> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
         <label> Driver's License Number</label> 
 
         <input name="dln" type="text" class="form-control" id="dln" placeholder="Driver's License Number"> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </form> 
 
       </div> 
 
       <div class="col"> 
 
       <hr> 
 
       <button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button> 
 
       </div> 
 
       <div class="col"> 
 
       <button class="btn btn-secondary nextBtn btn-lg float-right" type="submit" onclick="window.location.href='ui-review.html'">Finish <i class="fal fa-arrow-right"></i></button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    <div class="footer mt-5"> 
 
     <a href="#"><img src="dist/images/inlineonline-logo.png" alt="In Line Online logo" width="250"></a> 
 
     <p> Copyright &copy; 2017 State of New Mexico</p> 
 
    </div> 
 

 
    <!-- SCRIPTS --> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDaUcFwmFZosg6lIjUQFolSsqp_Zd9GCw&callback=initMap"></script> 
 
    <!--/SCRIPTS --> 
 
</body> 
 

 
</html>

Source

2017-08-28 Scott Fowler

+0

Votre question est donc pourquoi ne pas est la carte Google chargée lorsque vous cliquez sur suivant et si vous cliquez dessus, vous voyez la carte. Mais leurs ne sont pas des marqueurs dessus? – Steven

+0

Oui, la solution ci-dessous a résolu le problème. Merci. –

+0

Merci à tous! Tu gères! J'apprécie vraiment l'aide! Cela a totalement fonctionné! –

Répondre

1

Appel google.maps.event.trigger(map, 'resize'); dans la fonction de rappel de allNextBtn.click dans un setTimeout semble rendre la carte complètement sur le changement onglet.

//Next Button script 
     allNextBtn.click(function() { 
     //trigger map resize on tab select 
     setTimeout(function(){ 
      google.maps.event.trigger(map, 'resize');   
     },10) 
     var curStep = $(this).closest(".setup-content"), 
      curStepBtn = curStep.attr("id"), 
      nextStepWizard = $('ul.setup-panel li a[href="#' + curStepBtn + '"]').parent().next().children("a"), 
      curInputs = curStep.find("input[type='text'],input[type='url']"), 
      isValid = true; 

     $(".form-group").removeClass("has-error"); 
     for (var i = 0; i < curInputs.length; i++) { 
      if (!curInputs[i].validity.valid) { 
      isValid = false; 
      $(curInputs[i]).closest(".form-group").addClass("has-error"); 
      } 
     } 

     if (isValid) 
      nextStepWizard.removeAttr('disabled').trigger('click'); 
     });

Codepen url https://codepen.io/azs06/pen/RZeMWV?editors=0010

Source

2017-08-28 17:54:18 azs06

+0

super, j'ai juste essayé d'ajouter redimensionner sur le clic suivant et j'ai remarqué qu'il a résolu le problème, c'est pourquoi j'ai posté la solution. C'est génial que vous ayez trouvé une meilleure façon de résoudre ce problème. – azs06

 Questions connexes

  • Aucun problème connexe^_^