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!

Answer 3

It's a common problem. You need to ensure that the map size is known to the API (currently it thinks it has zero size).

Trigger the resize event when the map is made visible. From the docs:

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize')

Answer 4

Ok just a slight modification on the things posted above. If you use the selected answer you might get a bug with the map not being focused correctly. What @SteveO7 said works well. I also had to adjust it a little for bootstrap. Here it is in CoffeeScript:

$('a[data-toggle="tab"]').on 'shown', (e) ->
  if $(e.target).attr('href') == '#tab2'
    center = Gmaps.map.map.getCenter()
    google.maps.event.trigger map, "resize"
    Gmaps.map.map.setCenter(center)