Новая встроенная карта Google, серая при небольших размерах

Я использую этот CSS-код, обернутый вокруг iframe, чтобы сделать их отзывчивыми.Новая встроенная карта Google, серая при небольших размерах

.responsive-iframe-container { 
     position: relative; 
     padding-bottom: 56.25%; // This is the aspect ratio 
     height: 0; 
     overflow: hidden; 
} 

.responsive-iframe-container iframe, 
.responsive-iframe-container object, 
.responsive-iframe-container embed { 
position: absolute; 
     top: 0; 
     left: 0; 
     width: 100% !important; 
     height: 100% !important; 

}

Это все еще работает для новых Карт Google, но когда карта опустится до определенного размера, он исчезает и заменяется на сером поле. Проверка на это показывает, что Google по какой-либо причине устанавливает «display: none» в этом размере. Есть ли решение этой проблемы?

Пожалуйста, ознакомьтесь тест scenerio: http://jsfiddle.net/kuLT6/

источник

2014-01-08 kthornbloom

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

Я боялся что. Какое ужасное решение. Если это так, они должны: 1) предоставить ссылку, чтобы просмотреть ее в полном размере или 2) фактически скрыть ее, а не оставить серый квадрат. – kthornbloom

Я абсолютный новичок поэтому, пожалуйста, имейте в виду. Имел ту же проблему и изменил нижнюю часть до 80%, и она сработала. Проблема почти наверняка связана с минимальным пространством, необходимым для управления и т. Д.

Только попробовал это на 80%, так как это сработало для меня таким образом. Могут работать и на меньших%.

источник

2014-01-21 13:25:03

Как упоминалось @ dr-mobile, это выглядит как функция.

У меня была такая же проблема в Firefox 26 на моем Mac (Mavericks).

Мне удалось избежать серого фона, используя более высокое соотношение сторон (ваш пример: 16:9).

Похоже, что дополнительная высота позволяет кодексу Google чувствовать, что у него есть место, чтобы показать все биты пользовательского интерфейса.

Вот мой SCSS:

.mm { 

    height: 0; 
    padding-bottom: 56.25%; // 16:9 = (9/16 = .5625) x 100 
    position: relative; 
    overflow: hidden; 
    margin: 10px 0; 

    iframe, 
    object, 
    embed, 
    video { 
     border: 0; 
     width: 100% !important; 
     height: 100% !important; 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 

    &.tv { padding-bottom: 75%; } // 4:3 = (3/4 = .75) x 100 

    &.slide { padding-bottom: 66.666%; } // 3:2 = (2/3 = .66666666666667) x 100 

}

И HTML (используя новые карты Google встраивать код):

<div class="mm tv"><iframe width="300" height="260" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d17819.243465772353!2d-122.4777661!3d37.8179015!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808586deffffffc3%3A0xcded139783705509!2sGolden+Gate+Bridge!5e1!3m2!1sen!2sus!4v1391366234135" frameborder="0" style="border:0"></iframe></div>

Обратите внимание, что я использую соотношение 4:3 сторон.

Я только проверял Chrome и Firefox на своем Mac, но кажется, что при наличии дополнительной высоты он позволяет просматривать карту с меньшими размерами.

источник

2014-02-02 19:54:18 mhulse

Новая встроенная карта Google, серая при небольших размерах

ответ

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