0

各ブートストラップ カルーセル スライドに複数のマップが挿入されるレスポンシブ デザインがあります。

最新の Google Maps API を使用すると、一部のマップは南極にズームアウトされて恐ろしいものに見えます

問題

いくつかの調査の後、コンテンツが非表示になっているため、タブで同様の問題を発見しました。しかし、提案された応答をプロジェクトで機能させることができませんでした。

私が最後に試したコードは

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

しかし、 「Uncaught ReferenceError: google is not defined」というエラーが表示されます

マップは自分の DB に保存され、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>

私は今立ち往生しています

4

1 に答える 1

2

Google マップの iframe でこれを行う 1 つの方法は、jquery.livequery ( https://github.com/hazzik/livequery ) を使用して表示されているかどうかを確認し、表示されていない場合はソースを再読み込みします。

デモ: 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-->
于 2014-11-18T04:30:27.447 に答える