either Google Map or FlexSlider displaying partially when in inactive div

Question

I guess I have almost same issue as this question: Google Map displaying just partially But unfortunately seems that the jsfiddle examples dont exist anymore.

when a page is loaded with a map that is in a hidden tab the map loads just partially, usually top-left of the map, how ever the map render well when it is loaded with the tab being active.

again I have a FlesSlider on another tab and same problem happens to it when page loads while FlexSlider tab is inactive.

Here is my javascript code:

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

Please have a look at this snippet I made for you to see the problem in action.

note 1: I tried some other answers for mostly same questions but didnt work for me or worked partially.

note 2: Remember I have the same problem with slider tab! I want a solution which fixes both.

score 0 · Answer 1 · answered Jul 20 '15 at 06:40

Solved it myself!

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

Here you can see a working example: Snippet

either Google Map or FlexSlider displaying partially when in inactive div

1 Answers1