gmaps4rails shows just half of the map when iside tab. Any idea why?

Question

I have been looking around but I have not found a problem like this.

Gmaps4rails works great for me!

The trouble is when inserted into a JQuery tab. It loads half of the map. It actually looks like is missing pictures. I can move/resize as usual. But only shows a part of the map. And the part missing is usually the left/bottom part. But the size of the empty part varies all the time.

At the same time, the hand that shows the mouse cursor when hovering the map turns into arrow when hovering this empty part(but this part is still inside the Google container).

If I place the gmaps container out of the JQuery tabs, it works perfectly. Has anyone seen this before?

view

   #tabs-4
     #gmap
       =gmaps("map_options" => { "detect_location" => true, "auto_zoom" => false, "center_on_user" => true, "zoom" => 17},"markers" => { "data" => @json })

Thanks a lot!

Answer 1

See this link http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

But resize is called differently in V3

Try calling google.maps.event.trigger(map, 'resize')

EDIT

Every method I found refers to a change in JavaScript. Another way I found http://snipplr.com/view/57003/

$('#tabs').tabs({
    show: function (event, ui) {
        google.maps.event.trigger(map, 'resize');
    }
});

Answer 2

Although this question is a year old, it describes exactly what I was experiencing but the accepted answer did not work for me. Here is what finally worked...

$('#tabs').tabs({
  activate: function (event, ui) {
    var center = Gmaps.map.map.getCenter();
    google.maps.event.trigger(map, 'resize');
    Gmaps.map.map.setCenter(center);
  }
});

Maybe Im using newer versions. I needed to use activate: instead of show: and the map was off center once it expanded to fill the container so the need for the centering code. Hope this saves someone some time!