Hiding GMap (and bringing it back)

September 13
blog author

Appno Blogger

Appnovation Coop

In my last blog I talked about adding GMap module to spice up your site. Usually it will work and requires very few additional changes once it is implemented. However, if you do a Google search on "gmap hide" right away you will see that there are a few posts with people talking about having trouble hiding the GMap view and bringing it back. Similar problems also appear when trying to hide a div with certain content for the iPad's Safari browser. If you manage to be able to hide and show one GMap view then it is not a problem for you. If there is more than one GMap view on the same page then you will most likely bump into this issue. Usually you can change the javascript css display:block and display:none settings to show and hide a div. This is the result of calling the hide() function and it works well with divs containing text content. This might not work for GMap view. The result is usually a greyed out or completely blank map view. Here are the reasons why GMap will fail to show up properly when doing this: 1) The map view itself has a css display property in the main div that wraps around the map. But inside that div there are also additional divs with their own css display properties as well. Calling hide() will not only set the main div's display property. It will also recursively set all the display properties inside the whole view into 'none'. When you activate the display property of the main div back to display:block all the rest of the divs inside still have display:none. So you only made the main div visible; the content inside is still hidden. 2)Even if you got all the display properties back you might notice the map could be half greyed out or the position is off. This is a common problem with GMap used as view in Drupal due to that once hidden GMap view which no longer remembers some of the settings before the hide. There are some patches and suggestions that I found online. I tried them all but there wasn't a 'one-touch' solution that worked for me so I dug a little deeper into the problem and found a solution that is used to fix show/hide objects on iPad's Safari browser also works with this problem. When hiding, try to avoid using the hide function. Instead of hiding it, move the view off screen with:

$(this).css("position", "absolute");
$(this).css("left", "-10000px");

This will keep the view as if it is still on the screen. But it will be out of the view area so nobody can really see it. When you need to show it just move it back with

$(this).css("position", "relative");
$(this).css("left", "0px");

and the view should now display at the position where you want it to show. Very simple isn't it? Here is a little hint for those who tried to show the GMap view inside Quicktabs. It might not work inside the tabs since some js files GMap needs won't get loaded when the tab is changed. As a result you will see a javascript error message in the map view. A simple work-around is to first create multiple GMap views and move them all off screen. When the matching tab is active then just display that view by moving it back to the right position.