WikiRiks

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Google MAP api V3 not shown into jQuery UI tab ======
This solution will work forever.\\
I've seen a lot of info about this problem, quite often very complicated and not working.
The best solution is the easiest one: initializing the map only when it's to be shown.

In this example:\\
  * The initialize function is what Google gives you. Can be different, it doesn't matter because this method works with every version of the API and will surely work in future versions
  * canvas is the div ID where I want to show the map
  * #tabs is the ID of the whole ui tab component
  * ui.index == 3 refers to the fourth tab inside the #tabs component, that is where I've put my map

<code javascript>
function mapInitialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
  }

	$(function() {
		var mapOnce; //initialize map only once
		$("#tabs").tabs({
			show: function(e, ui) {
				if (ui.index == 3) {
					if(mapOnce!=true){
						//only once
						mapInitialize();
						mapOnce=true;
					}
				}
			}
		});
	});
</code>