要麼Google Map或FlexSlider部分顯示在不活動div

我想我有這個問題幾乎相同的問題：Google Map displaying just partially 但不幸的是似乎jsfiddle的例子不存在了。要麼Google Map或FlexSlider部分顯示在不活動div

當一個頁面加載了隱藏標籤中的地圖時，地圖只是部分加載（通常是地圖的左上角），當加載了標籤時，地圖的渲染效果很好。

我在另一個選項卡上有一個FlesSlider，當頁面加載時FlexSlider選項卡處於非活動狀態時發生同樣的問題。

這裏是我的javascript代碼：

function initialize() { 
var mapOptions = { 
    scaleControl: true, 
    center: new google.maps.LatLng(26.535022, 54.027758), 
    zoom: 17 
}; 

var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    map: map, 
    icon: iconBase + 'schools_maps.png' 
}); 

var infowindow = new google.maps.InfoWindow(); 
infowindow.setContent('<b>hotel</b>'); 
google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map, marker); 
}); 
} 

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

$('.map-trigger').click(function() { google.maps.event.trigger(map,'resize'); 
}); 


// Tour Tab Image Slider 
$(window).load(function() { 
// The slider being synced must be initialized first 
$('#tour-slider').flexslider({ 
animation: "slide", 
controlNav: false, 
animationLoop: false, 
slideshow: false, 
rtl: true 
}); 
});

請看看這個snippet我做給你看在行動的問題。

筆記1：我嘗試了一些其他答案，大多數是相同的問題，但沒有爲我工作或部分工作。

筆記2：記住我有與滑塊選項卡相同的問題！我想要一個解決這兩個問題的解決方案。

來源

2015-07-20 Ali Alamshahi

解決它自己！

if ($('#map-canvas').length) { 
var map, 
    service; 

jQuery(function($) { 
    $(document).ready(function() { 
     var latlng = new google.maps.LatLng(26.531786, 53.971665); 
     var myOptions = { 
      zoom: 16, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      scrollwheel: false 
     }; 

     map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 


     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map 
     }); 
     marker.setMap(map); 


     $('a[href="#tour-map"]').on('shown.bs.tab', function(e) { 
      google.maps.event.trigger(map, 'resize'); 
      map.setCenter(latlng); 
     }); 
    }); 
}); 
}

在這裏你可以看到一個工作示例：Snippet

來源

2015-07-20 06:40:58

要麼Google Map或FlexSlider部分顯示在不活動div

回答

相關問題