CODEWITHSUNDEEP
jquerygoogle-maps
Kral
Kral

Reputation: 33

Google Maps do not display properly in Jquery tabs

I am using maplace plugin to display Google Map in jQuery tabs when you let off the map (second tab), the map can not load completely.

DEMO ON FIDDLE

Upvotes: 1

Views: 213

Answers (2)

Aeroradish
Aeroradish

Reputation: 371

The solution is to move the new Maplace out of the document load and into the tab click event.

Working fiddle: http://jsfiddle.net/6xwwv1pg/

Reference code

    $('[data-tab]').on('click', function (e) {
            $(this)
              .addClass('active')
              .siblings('[data-tab]')
              .removeClass('active')
              .siblings('[data-content=' + $(this).data('tab') + ']')
              .addClass('active')
              .siblings('[data-content]')
              .removeClass('active');
            e.preventDefault();

new Maplace({
        locations: LocsA1,
        map_div: '#gmap-dropdown',
        controls_title: 'Choose a location:'
    }).Load();
          });

Upvotes: 2

ltalhouarne
ltalhouarne

Reputation: 4636

You need to put your map div: <div class="map" id="gmap-dropdown"></div>
outside of your tabs div, as well as some Jquery logic:

Working fiddle

Upvotes: 2

Related Questions