Weird rendering of google maps inside Bootstrap carousel

Question

I am trying to load google map directions as one of the slides inside Bootstrap carousel.

Not really sure why this map is loading the way it is. If I remove the first item in the carousel, then the map loads fine. Its only if the map is the second item does it load weirdly.

Any ideas how to fix this and load the map correctly?

http://jsfiddle.net/ax9jF/4/

HTML:

<div id="carousel-1" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1" ></li>
  </ol>

  <div class="carousel-inner">
      <div class="item active" style="height: 450px; width: 100%;">
          ABC
      </div>
      <div class="item">
          <div id="map-canvas" style="height: 450px; width: 100%;">
          </div>
      </div>
  </div>

    <!-- Carousel Controls -->
  <a class="left carousel-control" href="#carousel-1" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-1" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Javascript

$(document).ready(function(){
var $canvas = $('#map-canvas');
var dstLatLng = new google.maps.LatLng(37.403867, -121.975405);
var orgLatLng = new google.maps.LatLng(37.4321365, -122.0988141);
var directionsRenderer = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var request = {
                origin: orgLatLng,
                destination: dstLatLng,
                travelMode: google.maps.TravelMode.DRIVING
              };
var mapOptions = {
                zoom: 8,
                center: dstLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
var map = new google.maps.Map($canvas[0], mapOptions);
directionsRenderer.setMap(map);
directionsService.route(request, function(result, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      return directionsRenderer.setDirections(result);
    }
});
$('.carousel').carousel();

})

score 0 · Accepted Answer · edited May 23 '17 at 11:49

This is actually the same problem as with google-maps inside tabs. The solution is the off-left technique, i.e. instead hiding the maps using display: none, you hide by adding the following class:

.off-left_hide {
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

The challenge is then to persuade your library to use this way instead of the classical hide(). For example, in jQueryUI 1.10+ (maybe even older version) they no longer use classes for hiding, so I had to patch the library myself. There are some "new solutions" of this problem that don't use the off-left technique (since it has been harder and harder with new libraries, sadly), but these solutions are often unreliable and produce glitches (you will see the incomplete map for a while before it loads etc.). The off-left technique works much better, but in many times you cannot use it without modifying your favorite javascript library.

Weird rendering of google maps inside Bootstrap carousel

1 Answers1