User Tools

Site Tools


Sidebar

Index

jquery:ui-tab-google-map-not-centered

Google map pin not centered in ui tab

Scenario

You put a Google map into a jquery ui tab that is not the first one, and when you open that tab the Google Map is not centered on the point of interest.

This happens because Google doesn't center the map until it is visible on screen. You can test it yourself: if you open the page and quickly go on the tab containing the map, the map will be centered. On the contrary, if you wait a few seconds before opening that tab, it remains uncentered.

Solution

Refresh the map using the tab click event.

var only1=true;
$("#tb3").click(function(){
	if(only1){
		gmap=$("#map iframe").attr('src');
		$("#map iframe").attr('src',gmap);
		only1=false;
	}
});

Change #tb3 with the id of the tab containing the map
Change $(“#map iframe”) with anything pointing to the iframe containing the map.

jquery/ui-tab-google-map-not-centered.txt · Last modified: 2014/09/03 17:49 by rik