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');
    }
});