Question

我有一个响应式设计，其中在每个bootstrap轮播幻灯片中插入了多个地图。

使用最新的Google地图API，一些地图看起来缩小为antartic and horrible

Issue

经过一些研究后，我发现了与标签类似的问题，因为隐藏的内容。但是我无法设法得到任何建议的答案来处理我的项目。

我试过的最后一个代码是

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

但我收到错误“未捕获的ReferenceError：Google未定义”

地图存储在我的数据库中，并使用API输出的代码

进行嵌入

示例：

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

我现在卡住了

Answer 1

使用Google Map iframe执行此操作的一种方法是使用jquery.livequery（https://github.com/hazzik/livequery）检查它是否可见，然后重新加载源（如果不是）。

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

将Google地图嵌入Bootstrap轮播中

1 个答案:

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