How To Show Google Map Correctly In JQuery Hidden Tabs

In my last post “Google Map in PHP For Absolute Beginners–The Easy Way”, I mentioned about how to display Google Map the easy way. In the present post I’ll show you how to show Google map correctly in a Jquery hidden tab.

Most of the people use Jquery for creating tabs on their web pages. And that’s great too. When we display Google Maps on front visible tab, its shown correctly. But when we display Google Map on any hidden tab, the map is not shown correctly, or shown partial or it does not get shown at all.

The Jquery version I’m referring to is: 1.4.2 and Jquery-ui version I am referring to is: 1.8.1.

To tackle this problem, we need to make two changes to our code for showing the map correctly.

1.  Use map.checkResize(); in Javascript function load() at the end. The load function should look exactly as below:

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new google.maps.LatLng("<?php echo $hostel->latitude; ?>", "<?php echo $hostel->longitude; ?>"), 13);

var name = "<?php echo $hostel->property_name; ?>";

var address = "<?php echo $address; ?>";

var type = "hostel";

var point = new GLatLng(parseFloat("<?php echo $hostel->latitude; ?>"),

parseFloat("<?php echo $hostel->longitude; ?>"));

var marker = createMarker(point, name, address, type);

map.addOverlay(marker);

}

map.zoomIn();

map.checkResize();

}

2. In the css file jquery-ui-1.8.1.custom.css or whatever name you have given to this file, search for “.ui-tabs .ui-tabs-hide”. Most probably this file resides in “jquery_folder/smoothness/” In this section make changes so that it looks as shown below:

.ui-tabs .ui-tabs-hide {

visibility:hidden;

position:absolute;

} /* display: none !important; Changed on 28th May, 2010, by Ganesh*/

Don’t forget to mention your name and date of change in the comment. This helps you to remember about what you changed and when.

I hope this should be useful to a wide audience.