谷歌地图在jQuery选项卡中加载时显示灰色方块_Jquery_Google Maps_Tabs

谷歌地图在jQuery选项卡中加载时显示灰色方块

jquery google-maps tabs

谷歌地图在jQuery选项卡中加载时显示灰色方块,jquery,google-maps,tabs,Jquery,Google Maps,Tabs,我试图在一个选项卡中加载一个Google地图（带有V3API），该选项卡通过jQuery代码隐藏。无论何时完成此操作，地图都会显示一些灰色正方形，而不是地图，并且还会在不同的位置显示地图 <div id="map" style="width: 500px !important; height: 400px !important;"></div> <script type="text/javascript"> var location

我试图在一个选项卡中加载一个Google地图（带有V3API），该选项卡通过jQuery代码隐藏。无论何时完成此操作，地图都会显示一些灰色正方形，而不是地图，并且还会在不同的位置显示地图

    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>

我找到了一些代码来修复这个，这个： google.maps.event.trigger（map，“resize”）

    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>

但我不知道在我的代码中放在哪里

    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>

这是我当前的映射代码（忽略PHP:）

    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>


变量位置=[
['





，.10]，
];
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
中心：新google.maps.LatLng（52.207607,5.603027），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i


这是不同选项卡的jQuery：
    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>

<script type="text/javascript">
jQuery(document).ready(function() {
    //When page loads, hide all content 
    jQuery(".tab_content").hide();
    jQuery(".tab_content:first").show(); //Show first tab content
    jQuery("#tabs li:first").addClass("active").show(); //Activate first tab
    //On Click Event
    jQuery("#tabs a").click(function() {

        //Remove any "active" class
        jQuery("#tabs .active").removeClass("active");

        //Add "active" class to selected tab
        jQuery(this).parent().addClass("active");

        // Hide all tab content
        jQuery(".tab_content").hide();

        //Find the href attribute value to identify the active tab + content
        var a = jQuery(this).attr("href");

        //Fade in the active ID content
        jQuery(a).fadeIn();




        return false;
    });
});
</script>


jQuery（文档）.ready（函数（）{
//加载页面时，隐藏所有内容
jQuery（“.tab_content”）.hide（）；
jQuery（“.tab_content:first”）.show（）；//显示第一个选项卡内容
jQuery（“#tabs li:first”）.addClass（“active”）.show（）；//激活第一个选项卡
//点击事件
jQuery（“#选项卡a”）。单击（函数（）{
//删除任何“活动”类
jQuery（“tabs.active”）.removeClass（“active”）；
//将“活动”类添加到所选选项卡
jQuery（this.parent（）.addClass（“活动”）；
//隐藏所有选项卡内容
jQuery（“.tab_content”）.hide（）；
//查找href属性值以标识活动选项卡+内容
var a=jQuery（this.attr（“href”）；
//淡入活动ID内容
jQuery（a.fadeIn（）；
返回false；
});
});

我知道以前有人问过这个问题，我觉得我很快就能用“google.maps.event.trigger（map，“resize”）；”解决这个问题了，我只是不知道该怎么办
    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>

任何帮助都将不胜感激，谢谢
 在谷歌地图处于隐藏状态时初始化谷歌地图时会发生这种情况
    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>

您有两种选择：
    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>


调用google.maps.event.trigger（map，“resize”）；当您显示新选项卡时
加载选项卡时初始化Google地图

两者都可以很好地工作；第二种方法在性能上更可取，但第一种方法可能需要较少的返工。嗨，詹姆斯，谢谢你的快速回答。我真的没有这方面的经验，你能更具体地说我需要在哪里添加代码吗？谢谢
    <div id="map" style="width: 500px !important; height: 400px !important;"></div>

    <script type="text/javascript">

    var locations = [
    <?php while ( $connected->have_posts() ) : $connected->the_post(); ?>
    ['<h3><?php the_title(); ?></h3><br /><?php echo get_post_meta($post->ID, 'adres', true); ?><br /><?php echo get_post_meta($post->ID, 'postcode', true); ?> <?php echo get_post_meta($post->ID, 'woonplaats', true); ?><br /><br /><?php echo get_post_meta($post->ID, 'telefoonnummer', true); ?><br /><a href="<?php echo get_post_meta($post->ID, 'website', true); ?>"><?php echo get_post_meta($post->ID, 'website', true); ?></a>', <?php echo get_post_meta($post->ID, 'latitude', true); ?>, <?php echo get_post_meta($post->ID, 'longitude', true); ?>,10],
    <?php endwhile; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(52.207607, 5.603027),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    <?php 
    // Prevent weirdness
    wp_reset_postdata();

    endif;
    ?>