CODEWITHSUNDEEP
jquerygoogle-maps-api-3twitter-bootstrap-3
user1917727
user1917727

Reputation: 43

Postpone google maps initialisation until after bootstrap tab is shown

I've researched a lot and it seems like a lot of people have had the same issue as me here, but i cant figure out how to fix it.

Basically i'm initializing a google map inside a hidden bootstrap tab. When i click on the pill to make the tab visible, only a small section of the map is shown.

From what i gather this is because the map is being initialized in a hidden element. So i need to initisialise the map only after the tab becomes visible.

I've tried and i've tried and i cant get the code right. Any help would be grand - how do i cause the map to only be executed after the tab is visible?

Thanks in advance

<!-- this is the hidden tab-->
<div class="tab-pane map-pane" id="map<?php echo $country_slug; ?>">

<div class = "row">
    <div class = "col-md-12">
      <div id="map-canvas" class = "map-canvas"></div>
    </div>
    </div>

    <!--and here is the map which executes inside the hidden tab-->
    <!--how can i cause this script to delay execution until the tab is shown?-->
<script type="text/javascript">

function initialize() {
    var mapOptions = {
       center: new google.maps.LatLng(22.39813,114.10943),
       zoom: 8
    };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

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

Upvotes: 2

Views: 5818

Answers (7)

ND_
ND_

Reputation: 63

This might be helpful, no JavaScript tricks needed.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}

https://stackoverflow.com/a/32551984/3072600

Upvotes: 0

ND_
ND_

Reputation: 63

Bootstrap tabs (and carousels and modals) are initially set to display none, until they become active, so the parent element of your map has height / width of 0.

I had the same problem with Bootstrap3 as you. finally I ended up with the simple CSS solution.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}

Upvotes: 0

laimisf
laimisf

Reputation: 11

$('#myTab a[href="#location"]').one('shown.bs.tab', function (e) {
    initialize();
});

Use .one() instead of .on(). This will prevent from reloading map again and again ;)

Upvotes: 1

Mr X
Mr X

Reputation: 1739

I tried to make it to center on each tab click.. but seems need to initialize everytime ...

@MrUpsidown any other way we can center the actual location without initializing everytime?

Possible solution ..
https://stackoverflow.com/a/25347742/3752338

Upvotes: 0

Dheeraj singh
Dheeraj singh

Reputation: 540

$('#myTab a[href="#location"]').on('shown.bs.tab', function (e) {
    initialize();
});

Upvotes: 1

MrUpsidown
MrUpsidown

Reputation: 22497

http://bootply.com/102479

Add an id to your map tab link so it's easier to identify. Trigger a map resize event when the corresponding tab content is shown.

This way the map is only initialized once, which is not the case with the previous answer.

Note that you need to define the map variable outside of the initialize function.

Upvotes: 7

Carol Skelly
Carol Skelly

Reputation: 362630

You should be able to attach a handler to the Bootstrap tab show event..

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    initialize();
});

Working demo: http://bootply.com/102241

Upvotes: 7

Related Questions