title: How to call a function when a tab is clicked?
body: <p>So I am using the tabs widget from jquery ui. I have 3 tabs: Details, Accomodation and Map. When I click on details and accomodation, it displays the text that I wrote in there. </p>
  
  <p>When I click on map the map tab, I want a google map to be displayed. I wrote a function to do that, but it doesn't display when the user clicks on the Map tab.</p>
  
  <p>I have loaded the right gmpas plugins as this code works on my other html page.
  This is my google map function:</p>
  
  <pre><code>(function googleMaps(){
          var mapCanvas = document.getElementById('map');
           var mapOptions = {
                    center: new google.maps.LatLng(29.099332, -110.980656),
                    zoom: 17,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    var map = new google.maps.Map(mapCanvas, mapOptions);
          });
  </code></pre>
  
  <p>here is my tabs:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
    &lt;ul&gt;
       &lt;li&gt;&lt;a href="#tabs-1"&gt;Description&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#tabs-2"&gt;Accomodation&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#tabs-3"&gt;Map&lt;/a&gt;
  
       &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabs-1"&gt;
       &lt;p&gt;some other text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="tabs-2"&gt;
       &lt;p&gt;some text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="tabs-3"&gt;
          &lt;div id="map"&gt;
  
          &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>EDIT = With request I am uploading the script tag as my 3rd tab opens by default which is undesirable:</p>
  
  <pre><code>&lt;script&gt;
      (function(){
          var bootstrapButton = $.fn.button.noConflict();
          $.fn.bootstrapBtn = bootstrapButton;
      }());
  
  
  
          $('a[href="#tabs-3"]').one("click", function () {
    (function googleMaps(){
      var mapCanvas = document.getElementById('map');
      var mapOptions = {
        center: new google.maps.LatLng(29.099332, -110.980656),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(mapCanvas, mapOptions);
      document.getElementById("map").innerHTML = map;
      $("#tabs-1").show()
    })();
  });
  
  
      var slideshow = $(".pgwSlider1").pgwSlideshow({
          transitionEffect: 'fading',
          autoSlide: true
      });
      $(function() {
         $( "#tabs" ).tabs();
      }); 
      &lt;/script&gt;
  </code></pre>
  
  <p>I do have other plugins like pgwSlider. They work fine.</p>