jQuery UI tab and Google Map Display problem (resize and center)

When you use jQuery UI tab or jQuery accordion for displaying Google map and facing problem on display of map.

You can follow these steps:

1) Add this code

jQuery(‘#tabs, #streetview‘).tabs({
activate: function(event, ui){
google.maps.event.trigger(streetview, ‘resize’);
}
});

Where #streeview is your map ID  and #tabs is your tab ID

above code solve your problem but if you facing another problem that map is not displaying with its center point than you should add this code:

2) Add this code:

lastCenter=map.getCenter();
google.maps.event.trigger(map_canvas, ‘resize’);
map.setCenter(lastCenter);

Where map_canvas is ID of map div.

Hope, this will be help full to you.

Ref:

1) https://developers.google.com/maps/documentation/javascript/events

2) https://developers.google.com/maps/documentation/javascript/reference