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.

Dr.Molle · Accepted Answer · 2014-03-01 09:48:58Z

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

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

Collectives™ on Stack Overflow

Google Map API with jQuery tab

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related