Bootstrap + Tabs + Google Maps issue

Sigh. I have seen some answers for how to solve this issue, but I can’t seem to get them to work for me. My google maps, contained within Bootstrap’s tabs, are not properly centering. Rather than the map being centered around a point on the map, its actually got the point in the top left corner. I’ve recreated the issue here, http://www.bootply.com/hGIQuAWD8B. I’ve tried the suggestions here, https://github.com/twbs/bootstrap/issues/2330 but my implementation hasn’ t been successful. I’m open to suggestions if anyone has any or can offer any advice.

Thanks in advance.

Which point? They’re centered for me…

If you tab over to the other tabs, none of those are, just the first one

Which browser are you using? Maybe I’m losing my mind…

You need to add initialize(); after the resize

This should work

      switch (e.target.hash) {
        case '#ypsilanti':
            google.maps.event.trigger(document.getElementById("map2"), 'resize');
            break;
        case '#plymouth':
            google.maps.event.trigger(document.getElementById("map3"), 'resize');
            break;
        case '#saline':
            google.maps.event.trigger(document.getElementById("map4"), 'resize');
            break;
      }
	  initialize(); 
2 Likes

@DaveMaxwell Aghh!!! You are awesome. This did the trick.

1 Like

This way would cause the maps to be recreated each time the tab is changed. I think you could optimize this a little further by only initializing each map the first time its tab is selected.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.