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

 

Advertisements

2 thoughts on “jQuery UI tab and Google Map Display problem (resize and center)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s