Клуб API Карт

Как сделать карту,что бы менялась в зависимости от размеров экрана?

Ирина Благодарова
30 апреля 2014, 10:29

Здравствуйте! Как сделать карту, что бы менялась в зависимости от размеров экрана.

14 комментариев
Всеволод Шмыров
30 апреля 2014, 11:11
Доброе утро!
Достаточно контейнеру карты поставить width|height 100%
http://jsfiddle.net/R5ZEa/5/

Или можно самостоятельно вызывать метод map.container.fitToViewport()
http://jsfiddle.net/Zb48K/4/
Ирина Благодарова
30 апреля 2014, 13:50

Я делаю как вы говорите, но карта почему то исчезает... Когда ей дать  фисированую ширину и высоту.. Она появляеться. Но когда дать в процентах она не работает, исчезает...Что это может быть, подключение API? или что то другое?

Это ваши CSS стили, АПИ тут вообще не причем.

Если карта исчезает значит у вас размеры родителького контейнера у карты равны нулю, а 100% от нуля будет ноль.

Всеволод Шмыров
30 апреля 2014, 14:13
Дело действительно не в API. Это особенность верстки в браузере. По умолчанию элементы растягивают по высоте контента и не имеют определенной высоты. При установке процентного значения высоты элемента нужно убедиться, что какой-нибудь из его родителей имеет высоту. В примере http://jsfiddle.net/R5ZEa/5/ html и body растягиваются на 100% высоты экрана.

В этом примере два одинаковых блока: в контейнере и без. Отображается тот, что в контейнере, так как у контейнера есть определенная высота.
http://jsfiddle.net/9rreU/
http://yadi.sk/d/QLhi9bkCNj2FE

Это вы у контейнера карты заменили.

А нужно чтобы родитель этого контейнера тоже имел размеры 

http://htmlbook.ru/samhtml/znacheniya-atributov-tegov/razmer

Ирина Благодарова
30 апреля 2014, 14:26

я поняла, спасибо большое, что помогли разобраться...

Ирина Благодарова
30 апреля 2014, 16:15

еще хотела задать вопрос... 

<div id="map">    <ymaps class="ymaps-map ymaps-i-ua_js_yes" style="z-      index: 0; width: 1439px; height: 0px;">

div> 
как можно поменять height, который добавляеться через js(который сейчас 0px)? 

Всеволод Шмыров
30 апреля 2014, 16:33
Это плохое решение. Если в этом месте поменять высоту, то API все равно будет считать, что контейнер карты нулевой по высоте. А это в свою очередь повлияет на отображение тайлов, расчет видимой области и на много чего еще.

Какую вы решаете задачу? Можете скинуть пример или ссылку на результат ? Вы хотите отобразить элемент по всей высоте какого-то другого, но тот не имеет размера?

Если нужно отобразить карту в какой-то сложной верстке, то нужно элементу map определенный размер задать.

Если вы хотите отобразить карту из скрытого контейнера (к примеру, map изначально с display: none), то после удаления display нужно просто вызвать map.container.fitToViewport().
Ирина Благодарова
30 апреля 2014, 16:36

вот сайт http://5.s1h.ru/index.php?option=com_content&view=article&id=5&Itemid=126... Карта загружаеться но не до конца. Когда нажимаешь F12 в браузере.. она потом нормально работает...

Ирина Благодарова
30 апреля 2014, 16:38

Конечно, я еще в стилях добавила

 .ymaps-map.ymaps-i-ua_js_yes{

height: 800px !important;

}, что от высоты считалось... Я просто не знаю другого варианта решения этой проблемы..

Ирина Благодарова
30 апреля 2014, 16:40

Она должна работать, как после нажатия F12..

Ирина Благодарова
30 апреля 2014, 16:47

как я понимаю, нужно переопределить height, который 0 в ту высоту которая мне нужна..А вот как это сделать?

Всеволод Шмыров
30 апреля 2014, 16:56
После нажатия F12 открывает средство разработчика и вместе с этим происходит resize окна. И карта подстраивается под уже под существующий размер. Как я говорил, раньше так делать нельзя. Размер карты должен сам устанавливаться в зависимости от размера контейнера карты (в данном случае элемент #map). У вас стоит heigth=100% на html, body, а на всех остальных промежуточных элементах (.wrapper (min-height!=height), .content, .item-page, .moduletable ...) нет.

Вам нужно или всем родительским элемента #map установить какую-нибудь высоту (не min-max), или установить 800px жестко для #map, или как-то программно после построения страницы рассчитывать размер контейнера, устанавливать высоту элементу #map и вызывать map.container.fitToViewport()
Ирина Благодарова
30 апреля 2014, 17:02

спасибо)