либо Google Map, либо FlexSlider частично отображаются в неактивном div

Думаю, у меня почти такая же проблема, как и в этом вопросе: Карта Google отображается лишь частично Но, к сожалению кажется, что примеров jsfiddle больше не существует.

когда страница загружается с картой, которая находится на скрытой вкладке, карта загружается только частично, обычно в верхнем левом углу карты, однако карта хорошо отображается, когда она загружается с активной вкладкой.

снова у меня есть 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
});
});

Пожалуйста, взгляните на этот фрагмент, который я сделал, чтобы вы увидели проблему в действии. .

примечание 1: я пробовал некоторые другие ответы на в основном те же вопросы, но не работал у меня или работал частично.

примечание 2: помните, у меня та же проблема с вкладкой ползунка! Я хочу решение, которое исправляет оба.


google-maps javascript tabs twitter-bootstrap flexslider
person Ali Alamshahi    schedule 20.07.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сам решил!

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

Здесь вы можете увидеть рабочий пример: фрагмент.

person Ali Alamshahi    schedule 20.07.2015