Google Maps on tabs

Hello,

Making the Google Maps work inside the Tabs or the Modals is Definitely Possible but requires some Additional Setup, which is Re-Initializing the Maps on the Tab so that it is displayed properly. Consider following the Steps below:

1. Consider using the following code for the Google Map inside the Tabs:

You can definitely use some other code with a Custom ID as we have just provided the Above Code for an Example.

1. Add the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:

	jQuery(document).ready( function($){

		var gmapInit = false,
			initGmap = function() {

				if( gmapInit == true ) { return true; }

				gmapInit = true;

				$('#google-map-tabs').gMap({
					address: 'Australia',
					maptype: 'ROADMAP',
					zoom: 3,
					markers: [
						{
							address: "Melbourne, Australia",
							html: "Melbourne, Australia"
						},
						{
							address: "Sydney, Australia",
							html: "Sydney, Australia"
						},
						{
							address: "Perth, Australia",
							html: "Perth, Australia"
						}
					],
					doubleclickzoom: false,
					controls: {
						panControl: true,
						zoomControl: true,
						mapTypeControl: false,
						scaleControl: false,
						streetViewControl: false,
						overviewMapControl: false
					}
				});
			}

		jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
			initGmap();
		});

	});

Please notice that we using the Google Maps ID: #google-map-tabs in the initGmap = function() Function Block to Re-Initialize the Google Map. So, if you are using a Custom ID, then make sure you change it here too.

The above code will work fine for Tabs. But, if you are considering to use the Google Maps on the Modals, then simply find the following code in the above code:

jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
	initGmap();
});

and replace it with:

jQuery( '#exampleModal' ).on( 'show.bs.modal', function (event) {
	initGmap();
});

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.