带有jQuery选项卡的Google Map API [英] Google Map API with jQuery tab

问题描述

我正在使用jQuery选项卡实现Google Map，但没有正确显示。

I am implementing Google Map with jQuery tab but not getting proper display.

我试过这段代码来重新标记标签ID的地图。

I have tried this code to reCenter the map onclick of tab ID.

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery("#tab6").click(function() {
            google.maps.event.trigger('location-canvas', 'resize');
            map.setCenter(bounds.getCenter());
            map.setZoom(16);
        });
    }); 
</script>

但没有用。

我使用这个标签脚本：简单的jQuery响应式标签界面插件 - jQueryTab

I am using this tab script: Simple jQuery Responsive Tabs Interface Plugin - jQueryTab

我的JSFiddle是：代码

And My JSFiddle is: Code

我将不胜感激如果您引导我并帮助我解决此问题。

I will appreciate If you guide me and help me fix this problem.

谢谢。

Thanks.

推荐答案

1. 您触发'location-canvas' code>，只有一个字符串，你必须提供 google.maps.Map -instance作为参数


2. <触发缩放事件onclick可能为时过早，请改用插件后的 - 方法。

1. you trigger the event for 'location-canvas' , what is only a string, you must supply the google.maps.Map-instance as argument

2. triggering the resize-event onclick may be too early, use the after-method of the plugin instead.

after: function(){if($(this).text()==='Google Map'){ 
    //map must be the google.maps.Map-instance and available here
    center=map.getCenter();
    google.maps.event.trigger(map,'resize');
    map.setCenter(center);                                             
}}

演示：< a href =http://jsfiddle.net/doktormolle/xzVpW/ =nofollow> http://jsfiddle.net/doktormolle/xzVpW/

注意： map - 变量在after方法中不可用。在我修改的小提琴中，我将实例存储在 $（'＃location-canvas'）。data

Note: the map-variable is not available inside the after-method. In my modified fiddle I stored the instance inside $('#location-canvas').data

这篇关于带有jQuery选项卡的Google Map API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！