Question

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?

Answer 1

Try specifying explicit dimensions for your map div:

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

It might just be that your div gets 0px height / 0px width and this is why it isn’t showing up.