Skip to content

Instantly share code, notes, and snippets.

@grudelsud
Created August 24, 2012 15:02
Show Gist options
  • Save grudelsud/3451732 to your computer and use it in GitHub Desktop.
Save grudelsud/3451732 to your computer and use it in GitHub Desktop.
initialize google maps with twitter bootstrap tabs
<!-- content -->
<div class="span10">
<!-- tabs -->
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_media" data-toggle="tab">View</a></li>
<li><a href="#tab_map" id="tab_map_link" data-toggle="tab">Visit</a></li>
</ul>
</div>
<!-- tab content -->
<div class="tab-content">
<!-- #tab_media -->
<div class="tab-pane" id="tab_media">
<div id="media_directory"></div>
</div><!-- #tab_media -->
<!-- #tab_map -->
<div class="tab-pane" id="tab_map">
<div id="map_canvas"></div>
</div><!-- #tab_map -->
</div>
</div>
$(function() {
var mapOptions = {
center: new google.maps.LatLng(50, -10),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map;
$('#tab_map_link').on('show', function(e) {
if( map == undefined) {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
});
})
@lboullo0
Copy link

And in Bootstrap 3 shold be:

$('#tab_map_link').on('shown.bs.tab', ....

Copy link

ghost commented Jun 6, 2014

Couldn't see a date on this post. Does anybody know how I can use this method with the google maps builder plugin for wordpress? I don't know how to reference the initialisation function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment