Deal with OL maps not being able to be hidden on pageload.

This is an issue with open-layers...

Regrettably I think this is *actually* an issue with the google-maps API that is used to draw the base-layer you are using.

I would suggesting googling for the openlayers JS library and see how it deals with google maps layers and see if other people have seen this issue

Hey @NicolasH, were you able to find a way around this. Its a tough one.

Related issue: #1025708: Open Layers and Quicktabs (with ajax): TypeError: this.center is null

This is mostly a limitation of the OL library not being able to initialize maps on page load. We can either workaround this in the module, or focus on fixing upstream. The latter is better but requires specific expertise and time.

Basic search suggests using map.updateSize()?

Actually i think it's an issue with verticaltabs. I have a custom form with a few fieldsets hidden in one of them is a OL map, no problem with it. Can someone post a way to replicate this ? (and it's working fine for the center map in admin form too)

Is this just with gmap ?
thansk.

Subscribing.
I came here from #1168440: google maps layer not properly displayed - thanks zzolo- I have a similar issue but with 6.x and the map (google only) is displayed in a colorbox

So, this should in theory be working fine. The OL UI module uses vertical tabs and has a map in one.

If this is still a problem, the only solution we can try to do is create a behavior for fieldsets that runs map.updateSize() when it it opens up, but otherwise, people will have to manage this themselves.

I'm having the same problem with views accordion:
http://www.bichodepessego.com/fpsk_new/en/user/20

did anyone find a solution for this?

Thanks.

This should work if the element is rendered on load (not hidden with display none). And if that doesn't work, you'll have to use map.updateSize() in some way.

Just for people who are struggling with this, here is some sample code I finally used to make it work.

This works for a map embeded in a JQuery Tab :

(function($) {
Drupal.behaviors.nmrz =  { // Whatever fits your namespace
  attach: function (context, settings) {
    $('#tabs').on('tabsactivate', function(event, ui) { // Id of the DIV containing the tabs
      if (ui.newPanel.selector == "#tabs-2") { // Id of the tab containing the OL stuff
        var mapObj = $('#openlayers-map').data('openlayers'); // Id of the DIV containing the map itself
        mapObj.openlayers.div.style.width = '862px';  // This has to be a different size from the original one ...
        mapObj.openlayers.updateSize(); /// .. otherwise this will do nothing.
      }
    });
  }  
};
})(jQuery);

Hope it can help and thanks for the tips contained in this thread.

For which version of Openlayers ?

OL 2-dev, the one listed for this issue.

Ok.

@Countzero #11 - I have the same requirement; can you please elaborate on where this code needs to go?

Somewhere in a custom module's js file, as per https://www.drupal.org/node/756722.

Thanks, I will give it a go.

Update - great, I got it working.

:-)