如何在bootstrap选项卡中显示地图？

Question

代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script type="text/javascript"> 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 

     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
     var mapOptions = { 
      zoom: 7, 
      center: chicago 
     } 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     directionsDisplay.setMap(map); 
    } 

    function calcRoute() { 
     var start = document.getElementById('start').value; 
     var end = document.getElementById('end').value; 
     var request = { 
      origin: start, 
      destination: end, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     directionsService.route(request, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

HTML代码：

<div id="menu2" class="tab-pane fade"> 
    <div class="col-md-12"> 
     <p>Hello...</p> 
    </div> 
</div> 
<div id="menu2" class="tab-pane fade"> 
    <div class="col-md-12"> 
     <input type="text" placeholder="Source" name="start" id="start" value="noida"> 
     <input type="text" placeholder="Source" name="end" id="end" value="delhi"> 
     <input id="Button1" type="button" value="button" onclick="calcRoute()" /> 
     <div id="map-canvas"></div> 
    </div> 
</div> 

在该代码中，我想要显示其具有一个id = “MENU2” 地图没有显示的标签内谷歌地图。当我点击id（menu1）时会显示hello，但当我点击id（menu2）文本字段正在呈现，但点击按钮时它不显示地图。我该如何解决这个问题？

谢谢

Answer 1

我使用此代码显示在引导标签谷歌地图

的Html

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no_padding"> 
       <ul class="nav nav-tabs"> 
        <li class="active"><a data-toggle="tab" href="#overview">Overview</a></li> 
        <li><a data-toggle="tab" href="#host">The Host</a></li> 
        <li><a data-toggle="tab" href="#location">Location</a></li> 
        <li><a data-toggle="tab" href="#reviews">Reviews</a></li> 
       </ul> 
       <div class="tab-content"> 
        <div id="overview" class="tab-pane fade in active"> 

        </div> 
        <div id="host" class="tab-pane fade"> 

        </div> 
        <div id="location" class="tab-pane fade"> 
         <div id="map" style="width:100%;height:500px"></div> 
        </div> 
        <div id="reviews" class="tab-pane fade"> 

        </div> 
       </div> 
      </div> 

jQuery的

jQuery(document).ready(function() { 
    function myMap() { 
     var mapCanvas = document.getElementById("map"); 
     var myCenter = new google.maps.LatLng(11.0238913, 76.9934423); 
     var mapOptions = { 
      center: myCenter, 
      zoom: 14, 
      mapTypeControlOptions: { 
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID] 
      }, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      disableDefaultUI: true, 
      mapTypeControl: false, 
      scaleControl: true, 
      zoomControl: true, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE, 
       position: google.maps.ControlPosition.LEFT_TOP 
      } 
     }; 

     var map = new google.maps.Map(mapCanvas, mapOptions); 
     map.setCenter(myCenter); 

     var marker = new google.maps.Marker({ 
      map: map, 
      position: myCenter, 
      draggable: true 
     }); 

     marker.setMap(map); 

     google.maps.event.addListener(marker, 'dragend', function() { 
      map.setCenter(this.getPosition()); // Set map center to marker position 
     }); 

     jQuery('.nav-tabs a[href="#location"]').on('shown.bs.tab', function() { 
      google.maps.event.trigger(map, 'resize'); 
      map.setCenter(myCenter); 
     }); 

    } 

    google.maps.event.addDomListener(window, 'load', myMap); 

});