google maps API v3 в iFrame не работает - проблема в IE

Question

У меня есть сайт CMS (размещенный на сервере A) и хотелось бы разместить карту Google на одной из страниц там.

То, что я сделал, это создать новую html-страницу (размещенную на сервере B), которая выполняет сопоставление и добавляет несколько маркеров, используя Google API v3.

Наша CMS - это что-то вроде Википедии (мы можем редактировать страницы), поэтому я подумал о добавлении iframe (на странице с сервера A) к новой странице html, которую я создал (расположенной на сервере B). Все загружается отлично в IE, Chrome, FF. Я вижу загрузку карты в iFrame с 10-20 маркерами на карте.

В этом случае проблема: в IE8 карта заморожена, я не могу использовать мышь для навигации по карте. Я все еще могу загрузить infowindows, но карта не перемещается, когда я ее перетаскиваю.

Немного больше деталей:

• Если я ставлю то же Iframe на другой хост (отличный от машины CMS), все это будет работать без проблем - но, очевидно, нам это нужно, чтобы показать в CMS.
• ЕСЛИ я переключу режим совместимости на свой IE8, он начнет работать: он позволит мне использовать мышь и перемещать/перетаскивать карту.
• ЕСЛИ Я указываю iFrame на страницы в Интернете, которые доставляются через SSL, это будет работать нормально.
• ЕСЛИ отображение выполнено на v2 (в отличие от v3) - похоже, что он работает.

Answer 1

Без URL-адреса, с которым нужно протестировать, мы оставляем догадки.

Вот пара:

• Поскольку вы упомянули SSL, убедитесь, что вы загружаете API Карт через SSL и что ваша проблема не в настоящее время вызвано содержанием не-SSL. У разработчиков IE должны быть предупреждения на консоли, если это так.
• Используйте конкретный IE X-UA-Compatible header/meta tag внутри вашего iframe, чтобы указать режим совместимости.

Answer 2

На самом деле он работает в IE, но вам нужно установить ширину и высоту. По умолчанию IE не принимает ширина: 100% и рост: 100%, и вы должны сделать что-то вроде этого:

<style type="text/css"> 
html 
{ 
    height:100%; 
} 
body 
{ 
    height:100%; 
    margin:0; 
    padding:0; 
} 
#google_map 
{ 
    height:100%; 
    width:100%; 
    height:inherit; 
    width:inherit; 
} 
</style> 

И карта Google находится в DIV по ID = «google_map».

<div id="google_map"></div>