1. 首页
  2. 问答
  3. 带Google Map API的Bootstrap选项卡没有完全加载

带Google Map API的Bootstrap选项卡没有完全加载

2017-08-28 74 views
1

我试图在Bootstrap选项卡中使用Google Maps API。当地图位于第一个标签中时，它会正确加载，但由于UI的考虑，我必须将其移至第二个标签。当我这样做时，地图不会完成加载。我使用名为“appt-lo”的类来触发第一个选项卡以显示活动状态。如果我将该类移动到第二个选项卡，则会显示我的地图，否则不显示。如果你们可以给我一些想法或者指引我走向正确的方向，我会深表感谢。带Google Map API的Bootstrap选项卡没有完全加载

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>

来源

2017-08-28 Scott Fowler

+0

所以你的问题是为什么不就是当你点击旁边加载的谷歌地图，如果你点击它，你看到的地图。但他们没有任何标志呢？ – Steven

+0

是的，下面的解决方案解决了这个问题。谢谢。 –

+0

谢谢大家！你摇滚！我非常感谢帮助！它完全工作！ –

回答

1

呼叫google.maps.event.trigger(map, 'resize');allNextBtn.click的回调函数内部setTimeout内似乎完全呈现在地图上标签的变化。

//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网址https://codepen.io/azs06/pen/RZeMWV?editors=0010

来源

2017-08-28 17:54:18 azs06

+0

太棒了，我只是尝试在下次点击时添加调整大小，并注意到它解决了问题，这就是为什么我发布解决方案。你找到解决这个问题的更好方法真是太好了。 – azs06

相关问题

 相关问题