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!

Heitor Chang · Accepted Answer · 2012-04-19T14:38:37.390

8

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

edited Apr 19 '12 at 14:38

answered Apr 19 '12 at 13:43

Heitor Chang

6,038
2
45
65

Well, I am quite new in this whole thing and I am not sure how I am susppose to do this. I have tried that JS method, replacing with the names of the tabs. But it does not work. I think I thin I am doing it wrong. – Sergio Nekora Apr 19 '12 at 14:24
I noticed you updated your question but I know zero Ruby :( Try what I show in my updated anser. – Heitor Chang Apr 19 '12 at 14:39
Well, you might not know Ruby but you made it work!I put that into with the function that call the tabs are worked! Thanks a lot! – Sergio Nekora Apr 19 '12 at 15:05
This is a year old, but I am struggling with the same problem. I know the basics are working because the tabs show up, but the resize event must not be firing for me. Any suggestions on what to check? – SteveO7 Mar 21 '13 at 20:15

score 4 · Answer 2 · answered Mar 25 '13 at 23:27

4

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!

answered Mar 25 '13 at 23:27

SteveO7

2,430
3
32
40

1

Always good to have new input. I will try it and post the results. – Sergio Nekora Apr 02 '13 at 18:11
1

One more note; the 2.x version of gmaps4rails replaces the Gmaps.map.map.xxxx syntax in favor of Gmaps.map.getMapObject().xxxx See the docs here https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Javascript-goodies – SteveO7 Apr 26 '13 at 13:06

score 1 · Answer 3 · answered Apr 19 '12 at 13:42

1

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

answered Apr 19 '12 at 13:42

Andrew Leach

12,945
1
40
47

As I said above... I am afraid I don't know where to implement that. Should it go into the Tab method? – Sergio Nekora Apr 19 '12 at 14:36
Post a link and we might be able to see. It needs to go in whatever actually unhides the map (probably the jQuery code). – Andrew Leach Apr 19 '12 at 14:41
Thanks a lot. Now it is fixed. – Sergio Nekora Apr 19 '12 at 15:05

score 0 · Answer 4 · answered Apr 05 '13 at 07:36

0

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)

answered Apr 05 '13 at 07:36

Michael Yagudaev

6,049
3
48
53

I think I am having the same styling problem with bootstrap but I can't get your code to work. Is the if statement necessary? – SteveO7 Mar 31 '14 at 21:11
Yes you want to make sure you are on the right tab. But you have to adjust it to match the id of your tab. If you don't mind running this code on every tab switch, than its fine to get rid of. – Michael Yagudaev Mar 31 '14 at 22:03
Dang, I forgot to use the newer syntax from my own comment above! Gmaps.map.getMapObject instead of Gmaps.map.map. Thanks for the quick replay! BTW, are you using version 2.x yet? – SteveO7 Mar 31 '14 at 22:12

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

4 Answers4

Linked