Google地图在jQuery标签中显示时显示灰色方块

我试图在通过jQuery代码隐藏的选项卡中加载Google地图（使用V3 Api）。无论何时完成，地图会显示一些灰色方块而不是地图，并且还会在不同位置显示地图。Google地图在jQuery标签中显示时显示灰色方块

我发现了一些代码来解决这个问题，这个： google.maps.event.trigger（map，“resize”）;

但我不知道把它放在我的代码的位置。

这是地图（忽略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; 
    ?>

这是jQuery的为不同的标签：

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

我知道这已经被问之前，我觉得我很接近用'google.maps.event.trigger（map，“resize”）;'解决这个问题，'我只是不知道该怎么做。

任何帮助，将不胜感激，谢谢。

来源

2013-02-15 user1540744

发生这种情况时，你初始化谷歌地图，而其隐藏。

你有2种选择：

呼叫google.maps.event.trigger（地图， “调整”）;当您展示新标签
初始化的谷歌地图时，标签加载

要么应该做工精细;第二个性能优于性能，但第一个可能需要更少的返工。

来源

2013-02-15 08:16:00

嗨，詹姆斯，感谢您的快速回答。我对此非常没有经验，你能更具体地说明我需要添加代码吗？谢谢。 – user1540744 2013-02-15 09:07:14

Google地图在jQuery标签中显示时显示灰色方块

回答

相关问题