Search code examples
jquerycsstwitter-bootstrapgoogle-mapsgoogle-maps-embed

Embed Google Maps inside Bootstrap Carousel

I have a responsive design where multiple maps are inserted in each of the bootstrap carousel slides.

Using the latest Google maps API some of the maps look zoomed out to the antartic and horrible

Issue

After some research i discovered a similar issue with tabs, since the hidden content. But i could not manage to get any of the proposed responses to work on my project.

last code i tried was 

$(document).ready(function() {
    $('#carousel-example-generic').on('slide.bs.carousel', function () {
        google.maps.event.trigger(map, 'resize');
    })
});

But i'm getting the error "Uncaught ReferenceError: google is not defined"

The maps are stored on my DB and embed using the code that the API outputs

Example :

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1961.5104998775728!2d-66.88076565031373!3d10.499010518599084!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0xfdd50a9e95ba1b19!2sEnoba+Sistemas!5e0!3m2!1ses-419!2sve!4v1415992894629!zoom=18" width="1350" height="400" frameborder="0" style="border:0"></iframe>

I'm stuck right now

Solution

  • One way of doing this with the Google Map iframe to use jquery.livequery (https://github.com/hazzik/livequery) to check if it's visible and then re-load the source if it's not.

    DEMO: https://jsbin.com/guzada/1/

    $(document).ready(function() {
   // REQUIRES jquery.livequery
   $('.google-map iframe:visible').livequery(function() {
     var mapFrame = $(this);
     if (!$(mapFrame).hasClass('map-refreshed')) {
       mapFrame.attr('src', mapFrame.attr('src')+'');
       mapFrame.addClass('map-refreshed');
    }
});
  
});

    HTML

      <div id="carousel-1" class="carousel slide">
     <div class="carousel-inner">
        <div class="item active">
           <div class="embed-responsive embed-responsive-16by9 google-map">
              <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed/v1/place?q=Eiffel%20Tower%2C%20Avenue%20Anatole%20France%2C%20Paris%2C%20France&key=AIzaSyAFUKSu28KvFk67YcSlUWeUJ2TpcifSVmQ"></iframe>
           </div>
        </div>
        <div class="item">
           <div class="embed-responsive embed-responsive-16by9 google-map">
              <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed/v1/place?q=Trafalgar%20Square%2C%20London%2C%20United%20Kingdom&key=AIzaSyAFUKSu28KvFk67YcSlUWeUJ2TpcifSVmQ"></iframe>
           </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>
     <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>
  <!--/.carousel-->