title: How to add Google Maps in two tabs of jQuery application
body: <p>I have two tabs in my jQuery application. I want to use Google Maps in both the tabs. I added script and two <code>&lt;div&gt;</code> tags for each tab shown in code below.     </p>
  
  <p><strong>First Tab:</strong></p>
  
  <pre><code>&lt;div class="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p><strong>Second Tab:</strong></p>
  
  <pre><code>&lt;div class="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p><strong>Script for Google Maps:</strong></p>
  
  <pre><code>function initialize() 
      {
              var latlng = new google.maps.LatLng(11.6952727, 77.5195312);
              var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementByClassName("map_canvas"),myOptions);
  
      }
  
  
  ----------Style for Google Map
  .map_canvas { height: 100% }
  #notes{ height: 100%;width:100% ; margin: 0px; padding: 0px }  // Tab1 div tag ,contains the First tab map Div Tag
  #accordionWrapper{ height: 100%;width:100% ; margin: 0px; padding: 0px }// Tab2 div tag, contains the First tab map Div Tag
  </code></pre>
  
  <p>The map is not displaying in the two tabs. What is the problem here?</p>