Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在$（document）.ready函数中调用initialize（）并删除google.maps.event.addDomListener（窗口，＆＃39; load＆＃39;，initialize）; 另外，给你的css中的#map div一些宽度和高度，如果你还没有这样做

使用UI标签插件

1 个答案: