Google maps api 3 Bootstrap旋转木马中谷歌地图的怪异渲染

我正试图加载谷歌地图方向作为一个幻灯片内的引导旋转木马

我不太清楚这张地图为什么会这样加载。如果我删除旋转木马中的第一个项目，则地图将正常加载。只有当地图是第二项时，它才会奇怪地加载

有没有办法解决这个问题并正确加载地图

HTML:

---

})

这实际上是与偏左技术相同的问题，即使用

display:none隐藏地图，而是通过添加以下类来隐藏：

.off-left_hide {
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

接下来的挑战是说服您的库使用这种方式，而不是传统的
hide（）
。例如，在jQueryUI 1.10+（甚至更旧的版本）中，它们不再使用类进行隐藏，因此我必须自己修补库。有一些解决方案（遗憾的是，由于新库越来越难使用），但这些解决方案往往不可靠，并且会产生小故障（在加载之前，您会看到一段时间不完整的映射等）。off-left技术工作得更好，但是在很多情况下，如果不修改您最喜欢的javascript库，就无法使用它

$(document).ready(function(){
var $canvas = $('#map-canvas');
var dstLatLng = new google.maps.LatLng(37.403867, -121.975405);
var orgLatLng = new google.maps.LatLng(37.4321365, -122.0988141);
var directionsRenderer = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var request = {
                origin: orgLatLng,
                destination: dstLatLng,
                travelMode: google.maps.TravelMode.DRIVING
              };
var mapOptions = {
                zoom: 8,
                center: dstLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
var map = new google.maps.Map($canvas[0], mapOptions);
directionsRenderer.setMap(map);
directionsService.route(request, function(result, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      return directionsRenderer.setDirections(result);
    }
});
$('.carousel').carousel();

.off-left_hide {
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}