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”);'解决这个问题,'我只是不知道该怎么做。
任何帮助,将不胜感激,谢谢。
答
发生这种情况时,你初始化谷歌地图,而其隐藏。
你有2种选择:
- 呼叫google.maps.event.trigger(地图, “调整”);当您展示新标签
- 初始化的谷歌地图时,标签加载
要么应该做工精细;第二个性能优于性能,但第一个可能需要更少的返工。
嗨,詹姆斯,感谢您的快速回答。我对此非常没有经验,你能更具体地说明我需要添加代码吗?谢谢。 – user1540744 2013-02-15 09:07:14