Jump to Content

Objective HTML

Google Maps for ExpressionEngine

The complete geolocation and mapping toolkit

Working with Tabs

Working with tabs can be problematic. By default, if a map is initialized while inside a hidden div (or a div without a height and width), the map will appear broken.

Incorrect

A broken map

Correct

A broken map

The Solution

The key to solving this problem is redrawing and recentering the map when the tabs are clicks. So the following examples use jQuery UI and Twitter Bootstrap, but any other tab library should work if you follow the same logic. And to make things easier, we have created a simple helper JS library so you don't have to write as much code.

Download GmapHelper.js

jQuery UI

<script type="text/javascript" src="/your/js/path/gmaphelper.js"></script>

<script type="text/javascript">
$(function() {			
	// 'map' is the value you used in your id paramater for the exp:gmap:init tag
	var helper = new GmapHelper('map');

	 $("#tabs").tabs({
	 	// older versions of jQuery UI will use the show() callback
		activate: function() {
		   helper.center();
		}
	});
});
</script>

Twitter Bootstrap

<script type="text/javascript" src="/your/js/path/gmaphelper.js"></script>

<script type="text/javascript">
$(function() {		
	// 'map' is the value you used in your id paramater for the exp:gmap:init tag		
	var helper = new GmapHelper('map');

	$('a[data-toggle="tab"]').on('shown', function (e) {
		helper.center();
	});
});
</script>