Jak ustawić mapę na div w innym dziale?

Jestem nowicjuszem w javascript i potrzebuję twojej pomocy przy ustawianiu mapy google do elementu div, który znajduje się w innym elemencie div. Oto kod, który działa jeśli elementy div nie są zagnieżdżone:Jak ustawić mapę na div w innym dziale?

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

Jednak jeśli mam zagnieżdżone DIV, to nie działa:

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

Jak mogę rozwiązać ten problem?

Źródło

2012-05-23 reederz

Po trochę badań, doszedłem do wniosku, że trzeba ustawić wysokość do id="main" div również

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

Ponieważ jest to pojemnik na mapie, a nie pojawi się określona wysokość nic. To jak staczanie kurtyny, mapa sama go nie popycha.

Ja zakładając, że masz coś podobnego już za ponieważ mapa działa bez zagnieżdżania, ale będę wspominać go ponownie:

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

Źródło

2012-05-23 02:02:41

Dzięki. Działa doskonale. Szukałem problemu w zupełnie niewłaściwym miejscu. – reederz

Nie ma za co! –

Mapa Google potrzebują statycznego wysokość i szerokość jego płótna. Nie należy używać wartości% dla wysokości i szerokości, jeśli element nadrzędny div nie ma rozmiaru statycznego. Również mapa google ma błąd, którego nie można załadować do ukrytego elementu div. (musisz mieć jakąś sztuczkę jeśli to zrobisz)

Źródło

2012-05-23 02:34:41

Jak ustawić mapę na div w innym dziale?

Odpowiedz

Powiązane problemy