Google Maps does not show

Question

I am having a problem with the Google Maps API v.3.

I have my canvas declared as

 <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 put the card inside the form, for example

<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 card is not displayed without generating JS errors. I changed the path to the google map to

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

and added an alert to see the identifier. 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 a warning statement shows map_canvas, the map will still not be displayed.

Any help with this?

Answer 1

Try specifying explicit dimensions for your div:

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

It can only be that your div gets a width of 0px height / 0px and therefore it is not displayed.