Google Maps не работает, когда внутри div

Я пытаюсь использовать API Карт Google, и div, который будет содержать карту, работает только тогда, когда не внутри другого div. Я создал небольшой пример кода с двумя картами, первый работает второй - нет. Если я удалю doctype этого фрагмента кода, оба будут работать. Любые идеи почему?Google Maps не работает, когда внутри 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>

Вот как это выглядит в Firefox и Chrome:

alt text

источник

2010-07-07 Pablo

отлично работает в Firefox – matpol

@matpol: там, я загружал, как я вижу его в Firefox и Chrome. – Pablo

Видимо, переходный doctype также работает, поэтому я собираюсь с этим. – Pablo

Я думаю, что они сидят друг на друга или что-то - изменить высота на css до высоты пикселей и обе карты будут работать

источник

2010-07-07 13:42:35 matpol

Нет, они не сидят друг на друга. Моя первоначальная ошибка заключается в том, что карта не отображается. Я создал этот пример с двумя картами, чтобы показать, когда это показано, а когда нет. Если вы прокомментируете первую карту, вы увидите нулевые карты. – Pablo

если вы закомментируете все, что нужно сделать (т. Е. Вызов javascript) с картой 1 и дать высоту в пикселях для отображения 2, она работает. Если вы установите обе высоты в пикселях, то обе карты работают. – matpol

Это действительно работает. Если вы проверите страницу в firebug, вы увидите, что карта создается. Но поскольку у вас нет позиционирования CSS, применяемого к внешнему div, карта div, созданная картами Google, расположена под первым map_canvas

Вам нужно поместить и установить размеры для внешнего div, попробуйте дать внешний div a высота пикселей и ширина пикселя ...

EDIT

вместо:

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

попробовать:

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

Вы увидите карту работает ...

источник

2010-07-07 13:43:55 ekhaled

Я не думаю, что это так. Прокомментируйте первую карту, и вы увидите нулевые карты. Если вы были правы, вы все равно должны увидеть одну карту. – Pablo

Checkout my edit ... – ekhaled

это отлично работает .. –

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

источник

2010-07-07 13:44:18 mcandre

Вы пробовали? Он ничего не показывает (это моя оригинальная проблема, это просто пример, показывающий, что JavaScript работает). – Pablo

Google Maps не работает, когда внутри div

ответ

Смежные вопросы