Карты Google не отображаются в IE 11

У меня есть следующая разметка с упомянутой выше проблемой. Все работает отлично в FF и Chrome, но не работает во всех версиях IE. Карта инициализируется, но вместо этого вы можете видеть только серый прямоугольник. Полный код здесь:Карты Google не отображаются в IE 11

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDGCfF8PovjNXwEq42KcdIiIjPgNTNh5tI&sensor=true"> 
    </script> 
    <style> 
     .popup-window { position: absolute; z-index: 3000; top: 50%; left: 50%; background-color: #fff; border-radius: 10px; padding: 20px 30px; 
      -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5); 
      -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5); 
      box-shadow:   0px 1px 5px 0px rgba(0, 0, 0, 0.5); 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      } 
     .popup-window_map-search {width: 1200px; height: 616px; margin: -230px auto auto -600px; } 
     .popup-window__content:after { content: " "; display: table; clear: both; } 
     .popup-window__map-container { margin-top: 20px } 
     .search_block {display: table-cell; width: 360px; padding-right:18px; vertical-align: top} 
     .search-list__wrapper {border: 1px solid #cccccc; border-radius: 3px; margin-top: 10px; max-height: 417px; overflow: auto} 
     .search-list li {padding: 6px 20px 7px; font-size: 14px; color: #404040; cursor: pointer; } 
     .map_block {display: table-cell; width: 758px; border: 1px solid #cccccc; border-radius: 3px;} 
    </style> 

    <script> 
     function init() { 
      map = new google.maps.Map(document.getElementById('google-map'), { center: { lat: 78, lng: 22 }, zoom: 6 }); 
     } 
    </script> 
</head> 
<body class="site-body" onload="init()"> 
<div class="popup-window popup-window_map-search"> 
    <div class="popup-window__content"> 
     <div class="popup-window__map-container"> 
      <div class="search_block"> 

       <div class="search-list__wrapper"> 
        <ul class="search-list"> 
         <li>One</li> 
         <li>Two</li> 
         <li>3</li> 
         <li>4</li> 
         <li>5</li> 
         <li>6</li> 
         <li>7s</li> 
         <li>8</li> 
         <li>9</li> 
         <li>10</li> 
        </ul> 
       </div> 
      </div> 
      <div id="google-map" class="map_block"> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Спасибо заранее.

источник

2015-02-09 Arnold_Brhen

Какие версии IE не работают? – geocodezip

Я тестировал его только в IE 11, и карта не отображается. –

Вам необходимо установить высоту для вашего карточного контейнера (.map-block).
IE, похоже, не подходит display: table-cell; для позиционирования.

я смог достичь того же конструкцию, установив оба .map-block и .search-block элементы для display: inline-table; (и установив высоту элемента карты). Протестировано на IE10, отлично работает.

источник

2015-02-10 08:29:06 MrUpsidown

Да. Благодарю. Google-карта в таблице - плохая идея. –

Карты Google не отображаются в IE 11

ответ

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