Бетке Сергей: iT блог

Наткнулся на одну неприятность при попытке вставки карт Яндекса (maps.yandex.ru) на страницу wordpress. Проблема возникла здесь: http://www.nice-tour.nov.ru/contacts. И выражалась она следующим образом (на картинке видно). То есть даже элементы управления видны и функционируют, а карты нет.

Решим и эту проблему…

Честно говоря, сначала грешил на плагин Yandex Maps for WordPress, который использовал для вставки карты. Перекопал весь его код, но никаких серьёзных проблем не нашёл. Shortcode для вставки карты с использованием данного плагина выглядит следующим образом:

[yandexMap name="Приятное путешествие" description="Туристическое агентство" width="100%" height="320"]Россия, Новгородская область, Великий Новгород, Александра Корсунова проспект, 53/1, офис 2.12[/yandexMap]

Результат Вы видите. Так в чём же причина? После того проверил все .css на предмет display, visibility и прочего наткнулся в .css темы на следующее определение:

img {
    border:0px;
    padding:5px;
    max-width: 100%;
}

На первый взгляд – ничего страшного. Но только на первый. Использовать max-width для тега img нельзя! Стоило убрать запись max-width – и всё заработало! (результат виден по ссылке в начале статьи).

Такие вот глупые на первый взгляд несовместимости. С одной стороны, и разработчикам Яндекса не помешает явно переопределить max-width, с другой стороны – и при работке .css тем не стоит огульно рисовать стили для тегов без явного указания класса или id. Надо бы разработчикам Яндекс.Карт написать про этот “глюк”.

Пока по результатам общения с разработчиками могу сказать следующее: любые правила в CSS, устанавливающие width:100% либо max-width:100% для тега img (без явного указания его класса или иных ограничений, не позволяющих применить это правило к карте) приводят к описанным проблемам. Будем надеяться, что общение с разработчиками приведёт к определённым корректировкам.