initialize google maps with twitter bootstrap tabs

index.html

<!-- 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>

index.js

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

is should be on('shown') not show

$('#tab_map_link').on('shown', function(e) {.....etc

And in Bootstrap 3 shold be:

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

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.