Fixing Gmap centering when GMap Views are in a Quick Tabs block

Last updated on
30 April 2025

As described in #352247: Gmap centering has error on hidden Quicktab tabs (was: How to display two gmaps properly), the standard Quick Tabs CSS for hidden Quick Tabs causes GMap map centering to fail, since the GMap Javascript cannot find the center point of the map when the containing

is set to display: hidden;.

This is easily fixable in your theme's CSS, however, by adding the following code, which changes how the hidden Quick Tabs are hidden:

.quicktabs-hide {
  display: block;
  position: absolute;
  left: -10000px;
  top: -10000px;
}

Note that both the display & position CSS attributes are required, since this technique will not work if either is missing or overridden. You may use the !important declaration if needed to make sure that they will not get overridden. For example, display: block !important;

If you are doing complex things with Javascript on your page, you may actually need to add a JS handler to the GMap to re-center when a Quick Tab is clicked. The following code, from #352247-36: Gmap centering has error on hidden Quicktab tabs (was: How to display two gmaps properly), may work:

Drupal.gmap.addHandler('gmap',function(elem) {
  var obj = this;
  obj.bind('checkresize',function() {
    obj.map.checkResize();
    obj.map.setCenter(new GLatLng(obj.vars.latitude,obj.vars.longitude), obj.vars.zoom);
  });
});

Help improve this page

Page status: Not set

You can: