Come impostare una mappa per div in un altro div?

Sono un novizio in javascript e ho bisogno del tuo aiuto per impostare una mappa di google per div elemento che si trova all'interno di un altro elemento div. Ecco il codice che funziona se gli elementi div non sono annidati:Come impostare una mappa per div in un altro div?

function initialize() { 

var myOptions = { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions);

Tuttavia, se ho nidificato div, non funziona:

<body onload="initialize()"> 
<div id="main"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</div> 
</body>

Come posso risolvere questo problema?

fonte

2012-05-23 reederz

Dopo un po 'di test, ho concluso che è necessario impostare un'altezza ai vostri id="main" div anche

style="width:100%; height:100%"

Perché è un contenitore per la carta, e senza apparirà un'altezza nulla definito. È come rotolare giù da una tenda, la mappa non la spingerà da sola.

sto assumendo che abbiate qualcosa di simile già troppo dal momento che la carta funziona senza nidificazione, ma sarò parlare di nuovo:

<style type="text/css"> 
    html, body {height:100%} 
</style>

fonte

2012-05-23 02:02:41

Grazie. Ha funzionato perfettamente Stavo cercando il problema nel posto assolutamente sbagliato. – reederz

Prego! –

Google Bisogno di un altezza statica e larghezza per la sua tela. Non dovresti usare% per altezza e larghezza se il div principale non ha dimensioni statiche. Anche google map ha un bug che non può essere caricato nel div nascosto. (è necessario avere qualche trucco se così facendo)

fonte

2012-05-23 02:34:41

Come impostare una mappa per div in un altro div?

risposta

Problemi correlati