3

これは、私が苦労していることを正確に示しているはずです: http://jsfiddle.net/PaulHighten/c5knqdgd/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingParis">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseParis" aria-expanded="true" aria-controls="collapseParis">
          Eiffel Tower, Paris
        </a>
      </h4>
    </div>
    <div id="collapseParis" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingParis">
      <div class="panel-body">
        <div class="googlemap">
          <iframe width="600" height="450" frameborder="0" style="border:0"
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>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingLondon">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseLondon" aria-expanded="false" aria-controls="collapseLondon">
          Trafalgar Square, London
        </a>
      </h4>
    </div>
    <div id="collapseLondon" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLondon">
      <div class="panel-body">
        <div class="googlemap">
          <iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=Trafalgar%20Square%2C%20London%2C%20United%20Kingdom&key=AIzaSyAFUKSu28KvFk67YcSlUWeUJ2TpcifSVmQ"></iframe>
       </div>
    </div>
  </div>
</div>

パリのパネルには、「in」のクラスがあるため、マップが正しく表示されます。

London パネルにはそのクラスがありません。これは、ブートストラップが適用されることを意味します display: none; そのパネルに。iframe が http リクエストを適切に実行するのを停止すると想定しています。

これを実現するために Google Maps Embed API を使用できますか? API v3 と initialize() 呼び出しに関連する質問をたくさん見てきましたが、埋め込み iframe コードを機能させることに関連するものを見つけるのに苦労しました。

前もって感謝します。

=================

編集:問題を解決するために使用したコード(関連するiframeを1回だけ更新するようにChristinaの回答をわずかに変更):

$('[data-toggle="collapse"]').click('show.bs.collapse', function() {
  var mapFrame = $($(this).attr('href') + ' .googlemap iframe');
  if (!$(mapFrame).hasClass('map-refreshed')) {
    mapFrame.attr('src', mapFrame.attr('src')+'');
    mapFrame.addClass('map-refreshed');
  }
});
4

1 に答える 1

3

shown.bs.collapse または show.bs.collapse 関数で iframe ソースを更新します。

$('[data-toggle="collapse"]').click('shown.bs.collapse', function() {  
     var googleIframe = $('.googlemap iframe');
      googleIframe.attr('src',googleIframe.attr('src')+'');
});

デモ: http://jsfiddle.net/ekba9y8w/

.googlemap が iframe の親であると仮定します。

Paul Highten の更新により、更新が継続されません。

$('[data-toggle="collapse"]').click('show.bs.collapse', function() {
  var mapFrame = $($(this).attr('href') + ' .googlemap iframe');
  if (!$(mapFrame).hasClass('map-refreshed')) {
    mapFrame.attr('src', mapFrame.attr('src')+'');
    mapFrame.addClass('map-refreshed');
  }
});
于 2014-11-02T19:39:37.607 に答える