3

I'm trying to put a Google Map inside a Bootstrap content-tab (this). This is my code for the map:

<style>
#map_canvas {
    width: 500px;
    height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, mapOptions);
};

google.maps.event.addDomListener(window, 'load', initialize);
</script>

this is where I place the map_canvas div:

<div class="tab-content">
    ...other divs here...

    <div class='tab-pane fade' id='contact'>
     <div class="row">
         <div id="send_email" class='span4 pull-right'>
          ...blablabla a form here...
         </div>
         <div id="information" class='span8'>
         <ul>...contact info...</ul>
         <div id="map_canvas"></div>       
     </div>
    </div>
</div>

This is the code for the divs:

$('#navtabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

Really, nothing special about it. Yet for some reason the map is off to the side, and looks like this:

enter image description here

If I try and move it it just auto-fixes itself to be half-outside like in the picture. ommiting bootstrap.css solves the problem. Putting #map_canvas outside the content-tabs also solves the problem. Yet I can't tell exactly what's screwing it up.

It isn't related to the max-width issue as suggested here, since I'm using bootstrap is 2.3.2 which addresses it and includes these lines by default (adding them to my own css doesn't help either):

#map_canvas img,
.google-maps img {
  max-width: none !important;
}

I tried playing with chrome developer tools and scanning the divs and its parents, I went over the .tab-content inside bootstrap css, I tried ommiting the entirety of the img attributes inside the bootstrap.css, I tried many other solutions from SO, to no avail.

Any help would be much appreciated.

Community
  • 1
  • 1
yuvi
  • 18,155
  • 8
  • 56
  • 93
  • 1
    This post will probably solve your issue: http://stackoverflow.com/questions/20746698/postpone-google-maps-initialisation-until-after-bootstrap-tab-is-shown – Marcellino Bommezijn Mar 04 '14 at 23:08

3 Answers3

2

I had a hacky solution for this issue when this was happening to my map in a bootstrap modal.

When the the tab (or modal in my case) content has finished loading call:

 google.maps.event.trigger(MAP_OBJECT, "resize");

And optionally:

MAP_OBJECT.setCenter(center);

Admittedly, the map for a brief moment looks the way it does in your screen shot and then looks normal.

Sorry I don't have a definitive fix for you!

Joseph Feeney
  • 97
  • 4
  • As I also mentioned in the question, I tried this already (tried it again after you answered as well), and it isn't working for me. Thanks for trying anyway, but do note that the problem is obviously css-related and *not* something to do with the javascript – yuvi Dec 17 '13 at 22:58
  • turns out it isn't related to css. I just didn't bind it to the right event – yuvi Jul 10 '14 at 05:17
2

I had the same problem. Joseph's solution will work if you'll bind to the shown event instead of click.

freakycue
  • 51
  • 4
  • bind the `shown` event to what? To `setCenter` or to `$(this).tab('show');`? – yuvi Feb 17 '14 at 07:36
  • you're right. It took me a whole while to get there because this is a project I kinda abandoned but thar she blows. I gave @JosephFeeney the correct answer because, well, he answered the question. You got +1 though, thanks! – yuvi Jul 10 '14 at 05:16
0

@freakycue was right. I needed to do Joseph's answer but bind it to the shown event.

This is what ended up working for me:

$("#navtabs a").on("shown", function(e) {
    google.maps.event.trigger(MAP_OBJECT, "resize");
});
yuvi
  • 18,155
  • 8
  • 56
  • 93