World is Welcome To The World of Linux

Journey into the world of linux

Menu
  • About
  • Welcome
Menu

How To Show Google Map Correctly In JQuery Hidden Tabs

Posted on May 28, 2010January 17, 2019 by Ganesh Sharma

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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.

2 thoughts on “How To Show Google Map Correctly In JQuery Hidden Tabs”

  1. Erundina says:
    June 24, 2010 at 10:56

    was walking by net and found your blog. Reciprocate the visit http://sensuaisegatas.blogspot.com

    Reply
  2. Ron says:
    September 1, 2010 at 18:51

    I’ve just run into this exact same problem. Unfortunately it looks like your fix is for version 2 of the Google Maps API. It doesn’t seem to work with version 3.

    The jQuery UI docs now provide a workaround for this problem – by positioning the hidden tabs off-screen instead of actually hiding them:

    http://docs.jquery.com/UI/Tabs#…my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Date Command Tutorial(Video)
  • grep Command Tutorial – 1(Video)
  • Introduction To ls Command(Video)
  • Chapter 3
  • Set Position Of Poll Module Into Joomla

Recent Comments

  • Kansas City Trailer Proz on Physical Volume In AIX – A Primer
  • Create volume group in AIX | myunixsheet on How To Create Volume Group
  • Restore of AIX backup on other Unix system - TecHub on What is mksysb And What Are Its Components
  • Firewall Unleashed - InfoSec Institute on Packet Filtering Firewall: An Introduction
  • Manwendra on Proxy Firewall and Gateway Firewall: Introduction

Archives

  • January 2019
  • June 2010
  • May 2010
  • February 2010
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008

Categories

  • 30 Days To Joomla WebSite Setup
  • A Journey To The World of Linux System Administration
  • Aix
  • Backups
  • Books
  • Firewalls
  • Introduction
  • Joomla
  • Joomla Backup
  • Joomla Web Technology
  • Linux
  • LPAR and Virtualization
  • LVM
  • Pluggable Authentication Modules
  • section navigator pro
  • Security
  • Security Knowledge Base
  • Tips and Tricks
  • Uncategorized
  • World is Welcome Products

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
©2023 World is Welcome To The World of Linux | WordPress Theme by SuperbThemes