Google Maps non funziona quando ci si trova all'interno di un div

Sto tentando di utilizzare l'API di Google Maps e il div che contiene la mappa funziona solo quando non si trova all'interno di un altro div. Ho creato un piccolo codice di esempio con due mappe, il primo funziona il secondo no. Se rimuovo il doctype di questo pezzo di codice, entrambi funzionano. Qualche idea, perché?Google Maps non funziona quando ci si trova all'interno di un div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta content='application/xhtml+xml; charset=UTF-8' http-equiv='content-type' /> 
    <style type='text/css'> 
     html { height: 100% } 
     body { height: 100%; margin: 0px; padding: 0px } 
     #map_canvas { height: 50% } 
     #map_canvas2 { height: 50% } 
    </style> 
    <title>Map</title> 
    <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script> 
    <script type='text/javascript'> 
     function initialize() { 
      var latlng = new google.maps.LatLng(20, 20); 
      var myOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions); 
     } 
    </script> 
    </head> 
    <body onload='initialize()'> 
    <div id='map_canvas'></div> 
    <div> 
     <div id='map_canvas2'></div> 
    </div> 
    </body> 
</html>

Questo è come sembra in Firefox e Chrome:

alt text

fonte

2010-07-07 Pablo

funziona bene in Firefox – matpol

@matpol: lì, ho caricato come la vedo io in Firefox e Chrome. – Pablo

Apparentemente, anche il doctype transitorio funziona, quindi ci sto andando. – Pablo

penso che sono seduti uno sopra l'altro o qualcosa - cambiare il altezza sulle altezze da css a pixel ed entrambe le mappe funzioneranno

fonte

2010-07-07 13:42:35 matpol

No, non sono seduti uno sopra l'altro. Il mio bug originale è che la mappa non viene mostrata. Ho creato questo esempio con due mappe solo per mostrare quando viene mostrato e quando non lo è. Se commentate la prima mappa vedete zero mappe. – Pablo

se commenta tutto ciò che deve fare (cioè la chiamata javascript) con la mappa 1 e dà un'altezza in pixel per mappare 2 funziona. Se si impostano entrambe le altezze in pixel, entrambe le mappe funzionano. – matpol

Funziona, Se ispezionate la pagina in Firebug, vedrete che la mappa è in fase di creazione. Ma poiché non hai alcun posizionamento CSS applicato al div esterno, la mappa div creata da Google maps è posizionata sotto il primo map_canvas

Hai bisogno di posizionare e impostare le dimensioni per il div esterno, prova dando il div esterno a altezza pixel e larghezza in pixel ...

EDIT

invece di:

<div id='map_canvas'></div> 
<div> 
    <div id='map_canvas2'></div> 
</div>

prova:

<!--<div id='map_canvas'></div>--> 
<div style="width:900px;height:900px;"> 
    <div id='map_canvas2'></div> 
</div>

Si vedrà la mappa funziona ...

fonte

2010-07-07 13:43:55 ekhaled

Non penso sia così. Commenta la prima mappa e vedrai zero mappe. Se tu fossi corretto dovresti comunque vedere una mappa. – Pablo

Acquista la mia modifica ... – ekhaled

funziona molto bene grazie .. –

<body onload='initialize()'> 
    <div> 
     <div id='map_canvas'></div> 
    </div> 
</body>

fonte

2010-07-07 13:44:18 mcandre

Hai provato? Non mostra nulla (questo è il mio problema originale, questo è solo un esempio che mostra che JavaScript funziona). – Pablo

Google Maps non funziona quando ci si trova all'interno di un div

risposta

Problemi correlati