使用UI选项卡插件正确实现JQuery谷歌地图插件

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

我尝试做的是一个Jquery ui选项卡，即3个选项卡和一个小的JavaScript谷歌地图

  <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;
      }

在$（document）.ready函数中调用initialize（）并删除google.maps.event.addDomListener（window，'load'，initialize）；此外，如果您还没有这样做，请在css中为#mapdiv指定一些宽度和高度。

相关内容

最新更新

热门标签：