Google Map API with jQuery tab

Question

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

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>

but didn't work.

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

And My JSFiddle is: Code

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

Thanks.

Answer 1

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);                                             
   }}
   

Demo: http://jsfiddle.net/doktormolle/xzVpW/

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