使用 UI Tabs 插件正确实现 JQuery Google 地图插件答案

【问题标题】：Correctly implementing a JQuery Google map plugin with the UI Tabs plugin使用 UI Tabs 插件正确实现 JQuery Google 地图插件
【发布时间】：2015-12-30 00:06:38
【问题描述】：

我无法在我创建的 Jquery ui 选项卡上看到谷歌地图，我可以看到框架但看不到地图位置或任何东西。我需要做什么来解决这个问题？

我尝试做的是一个 Jquery ui 标签，即 3 个标签，一个有一个小的 JavaScript Google Map

  <script src="https://maps.googleapis.com/maps/api/js"></script>    
        
          <script>
    $(document).ready(function() {
      
  $(function() {
    $( "#tabs" ).tabs();
  }); 
}); 
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(2.0333, 45.3500),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  
      </script>


      </head>

      <body>
      <div class="container">
    <div class="jumbotron">
    <h1>Lorem ipsum</h1> 
  </div>

</div>
      <div class="container">
      <div class="row">
      <div class="col-sm-12"></div>
        <img src="image1.jpg" class="img1" alt="Cinque Terre" width="800" height="490">
        <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Lorem ipsum</a></li>
    <li><a href="#tabs-2">Lorem ipsum</a></li>
    <li><a href="#map">Lorem ipsum</a></li>
  </ul>
  <div id="tabs-1">
    <p>l lorem ipsum jfsdjkng jkgndksjgn djkndsjkgns lorem ipsum jfsdjkng jkgndksjgn djkndsjkgnsorem ipsum jfsdjkng jkgndksjgn djkndsjkgns
</p>
  </div>
  <div id="tabs-2">
    <form role="form">
    <label class="radio-inline">
      <input type="radio" name="optradio">lorem Star 
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">lorem Star
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">lorem Star
    </label>
  </form>
  <br>
  </div>
  
     <div id="map"></div>

</div>

 #map {
        width: 300px;
        height: 280px;
      }

【问题讨论】：

有人可以指导我到一个示例或页面，它可以让我知道如何解决这个问题
在 StackOverflow 中搜索类似（或重复）的问题。
您可能需要检查问题22111346 - google-map-api-with-jquery-tab。
@LexJulienne 我无法让它工作

标签： javascript jquery google-maps jquery-plugins

【解决方案1】：

在 $(document).ready 函数中调用 initialize() 并删除 google.maps.event.addDomListener(window, 'load', initialize); 另外，如果您还没有这样做，请为您的 CSS 中的#map div 提供一些宽度和高度

【讨论】：

是的，我有#map { width: 300px;高度：280px； }
如何将地图插件放置在 jquery ui 选项卡中？？