jQuery手风琴内的iframe映射显示错误

如何解决jQuery手风琴内的iframe映射显示错误

我有一个带有内置iframe的googlemaps的jQuery手风琴。

当我单击地图的选项卡时，将显示地图的“奇怪”视图（而不是正确的视图-因此未正确加载地图并“缩放”）。 如果将iframe粘贴到jQuery手风琴外面，一切都很好。

这是手风琴的代码

add_action( 'wp_enqueue_scripts','tu_load_jquery' );
function tu_load_jquery() {
    wp_enqueue_script( 'jquery' );
}

<script type="text/javascript">

  jQuery(document).ready(function($) {
    $('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slidetoggle('fast');
            
            
      //Hide the other panels
      $(".accordion-container").not($(this).next()).slideUp('fast');
      
      //Switch toggle
      $('.accordion-toggle.toggle-open').not(this).removeClass('toggle-open');
      $(this).toggleClass('toggle-open');
    });
  });
</script>

这是地图

<h2 class="accordion-toggle">MAP</h2>
<div class="accordion-container">

<div style="text-align:center;"><iframe src="https://www.google.com/maps/d/embed?mid=1jkH4drwlxAvMvvOBP0IEWqL7li1PirOm" width="1000" height="750"></iframe></div>


</div>

关于如何解决此问题的任何想法？ 谢谢！