Personal Blog

How do I correct the Google Maps display error in Internet Explorer when using UI Tabs?

For tabbed browsing in WordPress installations, I have been using the plugin Post UI Tabs (PUT) http://wordpress.org/extend/plugins/put/ The only problem is that when a Google Map is embedded within a tab, a resizing/display problem is caused. As far as I can see there is no easy fix.

There seems to be a lot of highly knowledgeable and complicated answers to the problem, but I eventually found a simple(ish) one. However implementing that solution takes a bit more explanation. In fact, the whole do-lally took several days to finally figure out and implement as there are several things which need to be done before being able to implement the solution ([4] below). This might seem a bit long-winded but it was the simplest solution I could find – for a rookie developer like me.

First a bit of background, the PUT plugin runs on jQuery with the jQuery files sited at a remote location. The first thing I did was to create my own jQuery files and upload them to my own server.

[1] You can design your own jQuery files (or just use one of the standard themes) and download them at: http://jqueryui.com/themeroller/ then upload them to your server. You will find the theme in the download file under “development-bundle\themes”.

[2] You will then need to modify the “put.php” file in the plugin to direct to the location of the custom jQuery folder. To do this open the plugin put.php file and find:

'http://ajax.googleapis.com/ajax/libs/jqueryui/'

change it to:

 '/name-of-folder-on-your-domain/'

[3] You then need to add “your-custom-theme” to the put.php file. In the put.php file, directly under the line:

private $skins    = array(
  'your-custom-theme','base', 'black-tie'

add the name of “your-custom-theme” to the list in the same format as above.

[4] The final hack that you need to make is to “your-custom-theme” jQuery files. In the file “jquery.ui.tabs.css” change the line:

.ui-tabs .ui-tabs-hide { display: none !important; }

To:

.ui-tabs .ui-tabs-hide {     position: absolute;     left: -10000px; }

Now you have a bespoke custom jQuery theme and your Google maps will display correctly in Internet Explorer.

3 Responses to How do I correct the Google Maps display error in Internet Explorer when using UI Tabs?