Google Maps not showing

I've been having a problem with Google maps API v.3.

I have my canvas declared like

 <div id="map_canvas" style="width: 50%; height: 50%; margin-left: auto; margin-right: auto"> 

and in my Javascript function

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); 

Everything is working fine.

However, when I place the map inside a form like

<form id="_frm" runat="server"> <table> . . . </table> <div id="map_canvas" style="width: 50%; height: 50%; margin-left: auto; margin-right: auto"> </div> <table> . . . </table> </form> 

the map doesn't show without generating JS errors. I changed my Google map's path to

var mydiv=document.forms[0].getElementsByTagName("div")[2]; 

and added an alert statement to see the id. So now I have

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); 

while the alert statement shows map_canvas the map still won't show.

Any help with that?