title: Google Maps not showing
body: <p>I've been having a problem with Google maps API v.3.</p>
  
  <p>I have my canvas declared like </p>
  
  <pre><code> &lt;div id="map_canvas" style="width:
   50%; height: 50%; margin-left: auto;
   margin-right: auto"&gt;
  </code></pre>
  
  <p>and in my Javascript function</p>
  
  <pre><code>var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  
  var mydiv=document.getElementById("map_canvas");
  var map = new google.maps.Map(mydiv , myOptions);
  </code></pre>
  
  <p>Everything is working fine.</p>
  
  <p>However, when I place the map inside a form like</p>
  
  <pre><code>&lt;form id="_frm" runat="server"&gt;
      &lt;table&gt;
          .
          .
          .
      &lt;/table&gt;
      &lt;div id="map_canvas" style="width: 50%; height: 50%; margin-left: auto; margin-right: auto"&gt;
      &lt;/div&gt;
      &lt;table&gt;
          .
          .
          .        
      &lt;/table&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>the map doesn't show without generating JS errors.
  I changed my Google map's path to </p>
  
  <pre><code>var mydiv=document.forms[0].getElementsByTagName("div")[2];
  </code></pre>
  
  <p>and added an alert statement to see the id. So now I have</p>
  
  <pre><code>var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROAD    
  }
  
  var mydiv=document.forms[0].getElementsByTagName("div")[2];
  alert(mydiv.id);
  var map = new google.maps.Map(mydiv , myOptions);
  </code></pre>
  
  <p>while the alert statement shows <code>map_canvas</code> the map still won't show.</p>
  
  <p>Any help with that? </p>