Google Maps non affiché

Question

J'ai rencontré un problème avec Google Maps API v.3.

J'ai ma toile déclarée comme

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

et dans ma fonction Javascript

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

Tout fonctionne très bien.

Cependant, lorsque je place la carte dans une forme comme

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

la carte ne montre pas sans générer des erreurs JS. J'ai changé mon chemin de carte Google à

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

et a ajouté une déclaration d'alerte pour voir l'id. Alors maintenant, j'ai

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

alors que l'instruction d'alerte montre map_canvas la carte ne sera toujours pas montrer.

Une aide avec ça?

Answer 1

Essayez spécifiant des dimensions explicites pour votre carte div:

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

Il est peut-être que votre div obtient 0px hauteur/largeur 0px et c'est pourquoi il n'apparaît pas.