Начать новую тему

Размещение Яндекс карты

Здравствуйте!

Есть проблема с размещением Яндекс карты на этой странице http://dvernoy.mymerchium.ru/how-to-find. Мне нужно, чтобы фото и карта располагались на экране рядом, если помещаются (при ширине карты 500 пикс), а если не умещаются, то чтобы карта была под фото и ужималась до размера экрана. Посмотрите на странице, я поместил карту в div и задал для него max-width:500px, а еще display:inline-block, чтобы карта не перелазила на следующую строку без необходимости. Но при таком раскладе карта не показывается при загрузке страницы, а показывается только если в инспекторе стилей выключить и снова включить правило display:inline-block. Почему так происходит и как сделать, чтобы работало?

Спасибо.

Здравствуйте!


Попробуйте изменить позиционирование для элемента с картой. Для этого добавьте position: relative; для тега div, в который обернута карта, и укажите свойства left и bottom для него. Например: 

position: relative;bottom: 290px;left: 420px;


Спасибо.

Этот вариант не подходит, потому что карта передвигается, но на ее месте остается пустота.

Здравствуйте!


Попробуйте обернуть изображение и карту в таблицу. То есть создайте таблицу определенной ширины с двумя колонками, задайте размер для каждой колонки и добавьте в одну колонку изображение, а в другую - код карты.


Спасибо.

Это мы уже проходили. У меня тогда таблица не отображается нормально на мобильном.

Здравствуйте.


Попробуйте расположить карту и и изображение в двух div блоках, указав для одного свойства float: left, а для другого float: right. Что касается отображения на мобильных устройствах, попробуйте добавить отдельные значения селекторов для правила @media. Пример, как это сделано для блока Выгоды и гарантии, вы можете посмотреть в данной теме:


http://help.merchium.ru/support/discussions/topics/1000058941

 

Если у вас возникают сложности с добавлением необходимых правил, мы рекомендуем обратиться к специалистам по интеграции дизайна. Вы можете обратиться к партнерам Маркета Мерчиума. Они будут рады вам помочь.


Спасибо.

При использовании float происходит что-то странное. Места под карту выделяется ровно столько, сколько нужно, т.е. текст под ней сдвигается вниз, но сама карта не показывается. А чтобы она показалась, мне приходится в инструментах разработчика в браузере выключить и опять включить правило float для секции с картой. Вот тогда все выглядит как надо. Это похоже на какой-то косяк с последовательностью загрузки элементов страницы, как исправить? 

Здравствуйте.


По всей видимости, такое поведение характерно для скрипта Яндекс.Карт в целом при расположении в divе со свойством float. Мы продолжим изучать ситуацию и сообщим вам, когда у нас появятся результаты.


Спасибо.

Спасибо за ожидание.


Данное поведение связано именно с виджетом Яндекс.Карт: когда карта встроена в div со свойством float, требуется задать точную ширину и высоту этого родительского diva. Например, как указано в документации к Яндекс.Картам, "cоздайте видимый контейнер ненулевого размера, в котором будет размещена карта. В качестве контейнера может использоваться любой HTML-элемент блочного типа (например, элемент div с заданной шириной и высотой). Карта заполнит этот элемент полностью". Например, 

  

<div id="map" style="width: 100%; height:100%; float:left; max-width:500px;">
	<script  type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=BWvchX_wzd_7HJ-3X1dnY4La5TSqhstA&width=100%&height=500&lang=ru_RU&sourceType=constructor"></script>
</div>

  

Спасибо.

Спасибо, теперь работает.

Здравствуйте! Постоянно пропадает Яндекс Карта на странице контактов с местоположением розничной точки продаж. Уже несколько раз делала заново. Проходит время и она снова исчезает. Почему так происходит, не подскажете? Кстати, заметила, что данные иногда исчезают, когда переключаешься между редакторами, поскольку в одном есть более менее норм шрифт, а в другом можно регулировать размер шрифта. С этим как быть?

Здравствуйте, Екатерина!


Подобная проблема может возникать, если блок с кодом Яндекс.Карты был отредактирован и сохранен при использовании HTML редактора. Дело в том, что JavaScript код нужно добавлять при выключенном HTML редакторе.  Более подробную информацию о том, как это сделать, вы можете узнать из нашей Базы знаний.


Спасибо.


Войдите, чтобы опубликовать свой комментарий