Плагин карты для wordpress. Проблемы при использовании API Яндекс.Карт и их решения. Вставляем интерактивную Яндекс.Карту

Плагин позволяет встраивать Яндекс.Карты в ваши записи и страницы в WordPress. В отличии от Google Maps, это позволяет вставлять карты больших городов Украины и России.
В картах можно включать либо выключать кнопки увеличения, миникарту и переключения вида карты. Требуется PHP5. Есть поддержка WordPress MU.

Установка:

1. Скачайте плагин, и скопируйте в /wp-content/plugins
2. В странице администрирования блога, зайдите в раздел Plugins и активируйте модуль
3. Вверху страницы появится сообщение о том, что необходимо ввести API-ключ. Его можно получить по адресу

Использование:

1. Зайдите в создание записи или страницы
2. Внизу, под полем ввода текста появится новая панельYandex Maps for WordPress”
3. Заполните поля, причём
* Location name - заголовок сообщения, которое появится рядом с точкой на карте
* Address - адрес, в который небоходимо вставить точку
* Location Description - тело сообщения, которое появится рядом с точкой на карте (можно использовать HTML, но не стоит использоват одиночную ковычку)
* Map width \ height - размер карты
* Enable Zoom/Pan Controls - показывает элементы управления картой
* Enable Map Type Controls (Map, Satellite, or Hybrid) - показывает элементы управления типом карты (улицы, спутниковая, гибрид)
4. Нажмите на кнопку “Send to map editor”

Карты Google — это отличный сервис для отображения местоположения вашего бизнеса на различных сайтах. С помощью плагинов Google Maps для WordPress вы сможете вставлять на веб-страницы Google Maps через Google Maps JavaScript API .

Ниже приводится список из 15 лучших плагинов Google Maps для WordPress , которые созданы специально, чтобы вам было проще указать свое местоположение.

1. WP Google Maps

С помощью прилагаемого шорткода вы можете быстро и легко добавлять настроенную карту Google в записи или на страницы WordPress . Плагин идеально подходит для создания карт на странице контактов, карт маршрутов и регионов поставки.

Бесплатная версия WP Google Maps позволяет создать карту Google с маркерами, а профессиональная версия позволяет сделать гораздо больше!

2. Google Maps Bank


Google Maps Bank Lite Edition позволяет создавать не более двух интерактивных карт, пяти маркеров, один маршрут и один многоугольник. Быстро и просто добавляйте настроенные карты в записи и на страницы WordPress с помощью прилагаемого шорткода.

3. Advanced Google Maps Plugin


Вы можете добавлять любое количество полей в описание местоположения и отображать их в InfoWindow . Например, факс, телефон, электронная почта, веб-сайт и т.д. Импорт данных из CSV , Excel , JSON и XML .

4. Google Maps Travel Route


Плагин позволяет легко вставлять в WordPress -сайт Google Maps с маршрутом тура, экскурсии и т.д. Через консоль вы можете добавлять, редактировать, удалять местоположения или редактировать параметры самой карты. Карта может быть вставлена на страницы, в записи или в боковую панель с помощью шорткода.

5. Responsive Google Maps


Адаптивная карта Google Maps , которая позволяет добавлять несколько маркеров на карту и несколько карт на страницу. Поддерживается отображение карты на весь экран и группировка маркеров в кластеры. Не требует ключа API . Простая настройка. Больше не нужно вручную создавать сложные шорткоды. Просто создайте карту, быстро добавьте местоположение, скопируйте простой шорткод и вставьте его на страницу.

6. Basic Google Maps Placemarks


BGMP создает пользовательский тип записей для меток (маркеров ) на карте Google . Карта встраивается на страницы или в записи с помощью шорткода. Формат отображения можно настроить с помощью специальных параметров. Вы можете создать маркеры, которые будут отображаться на карте, и установить для них иконки с помощью метабокса «Featured Image «. Когда пользователь нажимает на маркер, открывается окно, в котором выводится название и описание маркера.

7. WiLD Google Maps


WordPress — плагин, который позволяет создавать и управлять Google Maps на сайте! На сайте плагина вы можете найти примеры того, как он работает. Вы также можете управлять типом карты, ее размером и набором команд в интерфейсе. Можно разместить несколько карт с неограниченным количеством маркеров.

8. Ultimate Google Maps


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

9. Leaflet Maps Marker


Плагин выводит места расположения и маршруты на WordPress -сайте. Сортирует индивидуальные иконки в аккуратные слои на различных картах.

10. Google Maps Generator


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

11. Google Maps Easy


Создайте Google Maps за одну минуту с помощью плагина WordPress Google Maps Easy . Маркеры Google Maps с любым медиа-контентом, указатели местоположения с видео и текстовыми описаниями. Добавьте Google Maps с помощью шорткода, откройте ее во всплывающем окне или используйте виджет Google Maps .

12. Google Maps Editor


Google Maps Editor для WordPress позволяет создавать красивые карты через текстовый редактор WordPress . Имеет 5 встроенных стилей интерактивных карт.

13. Google Maps Master


Это идеальный плагин для отображения местоположения компании на карте Google . Реализованы параметры для настройки отображения карты, адреса сайта, электронной почты, номера телефона, города и страны. Также вы можете вывести на карте свой логотип, аватар, изображение или фото.

14. Cartogram


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

Помимо указания адреса вашей компании и времени работы, создайте карту на сайте и укажите клиентам, как лучше к вам проехать. Это поможет сэкономить время и быстрее отыскать вашу фирму. Для сайтов, созданных на WordPress карту можно вставить двумя способами: с помощью конструктора Яндекса или с использованием специального плагина.

Зачем на WordPress сайте нужна карта?

Укажите схематическое расположение вашей компании на местности и добавьте эту информацию на корпоративный сайт. Карта позволит потенциальным клиентам сориентироваться среди известных городских объектов и быстрее найти вас . Дополнительные доводы в пользу того, зачем на сайте нужна карта:

  • Графическая информация легче воспринимается в отличие от текстового написания адреса, которое сложно запомнить.
  • Будущие клиенты будут благодарны вам за схему въезда, которая позволит сориентироваться с парковкой.
  • Клиенты, которые добираются общественным транспортом, смогут проследить путь от ближайшей остановки.
Виртуальный хостинг сайтов для популярных CMS: Как создать и добавить на сайт Яндекс карту без плагина

Чтобы создать карту без плагина для сайта WordPress, зайдите в конструктор Яндекса по адресу: https://yandex.ru/map-constructor/ .

Для использования сервиса у вас должен быть адрес электронной почты в Яндексе.

  • В конструкторе задайте адрес организации в специальной строке и нажмите кнопку «Найти».
  • Маркер укажет здание на карте по заданному адресу. Щелкните на маркере, чтобы появилась форма для его настройки. Разместите описание объекта в отведенном поле, укажите тип и цвет маркера. При необходимости выберите для него иконку из списка и нажмите кнопку «Готово».
  • Подтвердите создание карты нажатием на кнопку «Сохранить и продолжить».
  • На следующем шаге создания карты выберите, в каком виде вы будете ее размещать на сайте. Предлагается 3 варианта: интерактивная с возможностью изменения масштаба, статическая в виде картинки или печатная в виде скачиваемого файла. Задайте размер видимой области в пикселях или перетаскивая маркеры на рамке выделенного участка. При выборе интерактивной или статической версии карты используйте кнопку «Получить код карты» и скопируйте показанный текст для последующей вставки в код страницы. Если выбрана печатная версия, будет предложено сохранить ее на Яндекс.Диск.

    Чтобы добавить карту на сайт, перейдите в админку WordPress, выберите нужную страницу или создайте специальную страницу для схемы проезда. В редакторе WordPress переключитесь в текстовый режим (1) правки кода. Вставьте скопированный код в требуемое место на странице (2) и опубликуйте ее.

    Вот так выглядит созданная нами в сервисе Яндекс интерактивная карта после встраивания ее кода на страницу сайта.

    Плагин OI Yandex Maps - как пользоваться, настройка, метки

    Для создания и добавления карты на сайт можно воспользоваться специальным плагином Oi Yandex.Maps for WordPress. В чем преимущество использования плагина в этом случае:

    • Для определения местоположения можно указать географическую широту и долготу вместо адреса.
    • Предусмотрена возможность более гибкой настройки информации, которая отображается при наведении на маркер.
    • В редакторе WordPress можно использовать визуальный режим для вставки карты.
    • API загружается не вместе со всем сайтом, а только если открыта страница с картой.

    В админке WordPress зайдите в меню «Плагины» и выберите пункт «Добавить новый». В строке поиска введите название плагина Oi Yandex.Maps, установите и активируйте его.

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

    В админ-панели WordPress перейдите на страницу сайта, где будет располагаться карта. Выберите в редакторе визуальное оформление текста (1). Обратите внимание, что над панелями инструментов появилась кнопка «Яндекс карта» (2). После вставки карты плагин добавит в код страницы соответствующую информацию (3).

    При нажатии на кнопку «Яндекс карта» всплывает окно для настройки параметров. Наберите адрес организации в подходящем поле, плагин автоматически выставит геопозиционные координаты этого объекта. При необходимости можно задать широту и долготу местности, если неизвестен точный адрес.

    По наведению на метку будет высвечиваться подсказка, текст которой вы можете указать в соответствующем поле. При нажатии на маркер показывается балон, в котором разрешается задать заголовок, подвал и описание объекта, расположенного по указанному адресу. Размер и масштаб карты можно оставить заданным по умолчанию или переопределить в этом окне.

    Для вставки карты в код страницы нажмите кнопку «Insert map». Плагин позволяет расположить на одном участке сколько угодно меток, используйте для этого кнопку «Insert placemark». Вот так выглядит на странице сайта карта, созданная плагином Oi Yandex.Maps for WordPress.

    Здравствуйте, друзья блога сайт! Если вы на блоге указываете адрес своей компании, любимого бара или просто место встречи, для красоты и удобства восприятия рекомендуется приложить карту, на которой маркером отмечено это место. В этой статье я расскажу вам как быстро и просто добавить Google Map и Яндекс карту в WordPress.

    Яндекс Карта — плагин Yandex Maps for WordPress

    После активации, появляется отдельный пункт в панели администратора WordPress — Google Map. Настройки плагина разбиты на два раздела:

    1. Shortcode Builder — генератор кода, который следует вставить в текст статьи или в виджет WP для отображения настроенной в этом разделе карты.

    Рассмотрим опции этого раздела.

    Basic Settings — основные настройки.

    • Width и Height — ширина и высота карты в пикселях.
    • Zoom — масштаб.
    • Map type — тип карты.
    • Alignment — выравнивание (расположение на странице).
    • Direction Hint — подсказка направления.
    • Map Language — язык.
    • Powered By — переводится как «Приведенный в действие», но назначение данной опции осталось для меня загадкой.

    Map Controls — элементы управления. Можно оставить настройки по умолчанию.

    Map Markers — ставим маркеры на карту.

    Для этого выбираем внешний вид маркера, указываем адрес его расположения и описание. Как я уже говорил, русские адреса плагин не воспринимает, поэтому их следует вводит английскими буквами, если и это не помогло — посмотрите в интернете правильно английское написание. Если адрес введет корректно, плагин появится чуть ниже.

    Что еще можно отображать:

    • Bike Paths — велосипедные дорожки.
    • Traffic Info — транспортную информацию.
    • Panoramio — фотографии местности.

    Когда карта настроена и на нее нанесены все необходимые маркеры, нажмите на кнопку GENERATE SHORTCODE . Появится окошко с кодом, скопируйте его и вставьте в статью.

    2. Settings — в этом разделе можно разрешить или запретить отображать опции генерации кода Google карты в редакторе WordPress (как это делается в плагине Yandex Maps for WordPress по умолчанию).

    Кроме этого плагин создает AZ:: Google Map . Настройки его полностью идентичны рассмотренным выше.

    Спасибо за внимание! Всех Вам благ!

    данным компании iTrack

    \"Конструктор схем проезда\" .

    • Filter HTML (по умолчанию).
    • Full HTML.

    В режиме Filter HTML тег


    Результат

    table {
    margin: 1em 0;
    width: 100%;
    }

    <script> подключения API.

    convert_urls и remove_script_host .

    YMaps.jQuery(function () {








    Return object;
    }
    }

    Редактор карты

    Редактор текста с кодом карты

    Настройка плагина

    clean для TinyMCE.

    map

    Настройка внешнего вида метки


    Список карт с кодами

    На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.

    Рассмотрены популярные бесплатные CMS и модули по работе с Яндекс.Картами. Освещены проблемы, которые могут возникнуть при вставке кода карт в эти CMS.

    Если вы знаете еще о каком-то подводном камне при использовании вышеперечисленных или других CMS, то напишите об этом в комментариях. Обо всех плагинах и модулях, не упомянутых в обзоре, также нам пишите. Мы обязательно добавим это в обзор.

    В данном разделе обсуждаются проблемы, связанные с конфликтами CSS-стилей, в результате которых карта или объекты на ней отображаются неверно.

    Первоначально мы решили осветить работу с такими CMS, как Drupal, Wordpress, Joomla и систему Ucoz. В сумме они занимают более 80% рынка бесплатных CMS по данным компании iTrack . DataLife Engine решили не учитывать, т. к. полная версия этой CMS - платная.

    Пожалуйста, учтите, что даже, проблемы у всех CMS схожие, поэтому даже если вашей CMS нет в списке, то прочитайте этот обзор полностью!

    В качестве основной задачи, принятой в данном обзоре, является вставка Яндекс.Карты на страницу без использованием или с использованием дополнительных плагинов/модулей. JavaScript-код, показывающий карту, был получен из инструмента "Конструктор схем проезда" .

    На настоящий момент список расмотренных CMS следующий:

    Используемая версия в обзоре: 6.16

    По умолчанию Drupal не снабжен визуальным редактором, редактирование контента осуществляется в обычных textarea.

    Разрешенные теги контролируются с помощью фильтров. После установки доступна два фильтра:

    • Filter HTML (по умолчанию).
    • Full HTML.

    В режиме Filter HTML тег не допускается, поэтому при использовании данного режима JavaScript-код будет отображен в виде обычного текста. Поэтому для вставки кода, отображающей карту, подходит только режим Full HTML (либо можно написать свой фильтр, который будет допускать ввод javascript).

    Интерфейс стандартного редактора
    Результат

    Карта, вставленная через стандартный редактор, отображается корректно. Однако html-комментарии (выделены красными прямоугольниками) не скрываются, а отображаются в опубликованной записи. Это баг самой CMS, поэтому перед вставкой кода их необходимо удалить вручную.

    При открытии балуна можно увидеть конфликт ccs-стилей, который приводит к разъезжанию балуна.

    Для устранения данного конфликта нужно в файле style.css (строка 193) убрать следующий стиль (или заменить на более частный):

    table {
    margin: 1em 0;
    width: 100%;
    }

    Рассмотрим самые популярные визуальные редакторы, используемые вместе с Drupal:

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

    Вставлять код нужно в режиме html (для этого в редакторе предусмотрена специальная кнопочка). TinyMCE вырезает атрибут src из тега подключения API.

    Исправить поведение редактора с помощью настроек CMS нельзя, однако можно задать дополнительные параметры при инициализации TinyMCE: convert_urls и remove_script_host .

    Необходимо открыть файл modules\\tinymce\\tinymce\\j scripts\\tiny_mce\\tiny_mce _src.js и удалить строки с 1999 по 2002:

    Вставить javascript-код можно без ухищрений, результат будет такой же, как и в случае со стандартным редактором.

    Данный модуль позволяет к любому типу контету добавлять карту с одной меткой

    Используемая версия в обзоре: 2.9.2

    CMS Word Press из коробки имеет свой визуальный редактор для текста с возможность переключения в режим редактирования HTML.

    Вставляем в режиме html любой javascript-код (например, полученный из конструктора) и на выходе получаем вот такое:

    YMaps.jQuery(function () {
    map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 9, YMaps.MapType.MAP);
    map.addControl(new YMaps.Zoom()
    map.addControl(new YMaps.ToolBar()
    map.addControl(new YMaps.TypeControl()


    Function createObject (type, point, style, description) {
    index = YMaps.jQuery.inArray(type, allowObjects),
    constructor = allowObjects[(index == -1) ? 0: index];


    Var object = new YMaps(point, {style: style, hasBalloon: !!description}
    object.description = description;


    Return object;
    }
    }

    Вставленные теги вызывают синтаксическую ошибку javascript и карта отображаться не будет. Это происходит из-за того, что WordPress даже в режиме HTML делает автовставку переносов строк. Отключить такое поведение настройками в админ-панели нельзя

    Вариантов два: либо записать весь код в одну строку (в этом случае дальнейшее редактирование кода будет затруднено), либо поправить тему для WordPress, добавив туда дополнительную настройку. Поэтому лучше выбрать второй вариант.

    В используемой схеме в файл functions.php необходимо добавить следующую строчку:

    remove_filter("the_content", "wpautop");

    Например, для дефолтной темы файлик нужно искать по следующему пути: wp-content\\themes\\default\\functions.php.

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

    Данный плагин позволяет добавить на карту одну метку с названием и описанием. Метка и карта позиционируются с помощью геокодирования (т. е. координаты указать нельзя - только адрес)

    Редактор карты

    Редактор текста с кодом карты

    В результате будет отображена карта с открытым балуном

    Данный плагин может отображать либо карту с заданным центром и масштабом, либо YMapsML-файл. В RSS вместо интерактивной карты выводится статичная.

    Плагин имеет небольшую админку (которая находится в меню Параметры – Yandex Map (XML)), в которой можно указать API-ключ, начальный центр и масштаб карты, а также ее размеры.

    Настройка плагина

    По умолчанию в Joomla в качетве стандартного редактора используется TinyMCE.

    Если вставить код, то редактор удалит контейнер с картой, потому что он пустой. Это происходит из-за установленной опции clean для TinyMCE.

    Для того, чтобы контейнер для карты не вырезался, в него нужно написать либо какой-то текст

    map

    либо добавить внутрь контейнера комментарий

    Компонент дает возможность создавать неограниченное количество карт и меток (для меток можно задавать разные значки).

    Интерфейс редактирования карты

    Интерфейс редактирования метки

    Настройка внешнего вида метки

    Искать центр карты или местоположение метки можно с помощью специального встроенного инструмента.

    Инструмент для определения координат

    Для отображении карты в тексте статьи, необходимо вставить специальный код. Например,

    Эти коды отображаются в списке карт: http://YOUR_DOMAIN/admini strator/index.php?option= com_yandexmaps&view=yande xmapsmaps

    Список карт с кодами

    Сам этот компонент не умеет отображать карты в статьях. Для обработки кодов, которые отдает компонент, необходим еще дополнительный плагин.

    Вставить JavaScript легко во строенном редакторе, никаких проблем не наблюдается. Главное включить html-теги и отключить вставку автопереносов.

    С помощью css-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.

    Например, этот стиль приведет к растягивнию балуна:

    Его лучше заменить, например, на такой:

    Полный список конфликтов и их причин приведен на отдельной странице

    ","contentType":"text/html"},"proposedBody":{"source":"

    На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.

    Рассмотрены популярные бесплатные CMS и модули по работе с Яндекс.Картами. Освещены проблемы, которые могут возникнуть при вставке кода карт в эти CMS.

    Если вы знаете еще о каком-то подводном камне при использовании вышеперечисленных или других CMS, то напишите об этом в комментариях. Обо всех плагинах и модулях, не упомянутых в обзоре, также нам пишите. Мы обязательно добавим это в обзор.

    В данном разделе обсуждаются проблемы, связанные с конфликтами CSS-стилей, в результате которых карта или объекты на ней отображаются неверно.

    Первоначально мы решили осветить работу с такими CMS, как Drupal, Wordpress, Joomla и систему Ucoz. В сумме они занимают более 80% рынка бесплатных CMS по данным компании iTrack . DataLife Engine решили не учитывать, т. к. полная версия этой CMS - платная.

    Пожалуйста, учтите, что даже, проблемы у всех CMS схожие, поэтому даже если вашей CMS нет в списке, то прочитайте этот обзор полностью!

    В качестве основной задачи, принятой в данном обзоре, является вставка Яндекс.Карты на страницу без использованием или с использованием дополнительных плагинов/модулей. JavaScript-код, показывающий карту, был получен из инструмента \"Конструктор схем проезда\" .

    На настоящий момент список расмотренных CMS следующий:

    Используемая версия в обзоре: 6.16

    По умолчанию Drupal не снабжен визуальным редактором, редактирование контента осуществляется в обычных textarea.

    Разрешенные теги контролируются с помощью фильтров. После установки доступна два фильтра:

    • Filter HTML (по умолчанию).
    • Full HTML.

    В режиме Filter HTML тег не допускается, поэтому при использовании данного режима JavaScript-код будет отображен в виде обычного текста. Поэтому для вставки кода, отображающей карту, подходит только режим Full HTML (либо можно написать свой фильтр, который будет допускать ввод javascript).

    Интерфейс стандартного редактора
    Результат

    Карта, вставленная через стандартный редактор, отображается корректно. Однако html-комментарии (выделены красными прямоугольниками) не скрываются, а отображаются в опубликованной записи. Это баг самой CMS, поэтому перед вставкой кода их необходимо удалить вручную.

    При открытии балуна можно увидеть конфликт ccs-стилей, который приводит к разъезжанию балуна.

    Для устранения данного конфликта нужно в файле style.css (строка 193) убрать следующий стиль (или заменить на более частный):

    table {
    margin: 1em 0;
    width: 100%;
    }

    Рассмотрим самые популярные визуальные редакторы, используемые вместе с Drupal:

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

    Вставлять код нужно в режиме html (для этого в редакторе предусмотрена специальная кнопочка). TinyMCE вырезает атрибут src из тега <script> подключения API.

    Исправить поведение редактора с помощью настроек CMS нельзя, однако можно задать дополнительные параметры при инициализации TinyMCE: convert_urls и remove_script_host .

    Необходимо открыть файл modules\\tinymce\\tinymce\\j scripts\\tiny_mce\\tiny_mce _src.js и удалить строки с 1999 по 2002:

    // Convert the src attribute of the scriptsattribs = attribs.replace(/src=\\\"([^\\\"]+)\\\"?/i, function(a, url) {if (s.url_converter)url = t.encode(s.url_converter. call(s.url_converter_scop e || t, t.decode(url), "src", "script"));return "_mce_src=\"" + url + "\"";}

    Вставить javascript-код можно без ухищрений, результат будет такой же, как и в случае со стандартным редактором.

    Данный модуль позволяет к любому типу контету добавлять карту с одной меткой

    Используемая версия в обзоре: 2.9.2

    CMS Word Press из коробки имеет свой визуальный редактор для текста с возможность переключения в режим редактирования HTML.

    WordPress \"из коробки\" имеет своей собственный редактор, который позволяет редактировать исходный код записи на вкладке HTML.

    Вставляем в режиме html любой javascript-код (например, полученный из конструктора) и на выходе получаем вот такое:

    YMaps.jQuery(function () {
    var map = new YMaps.Map(YMaps.jQuery(\"#YMapsID-914\")
    map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 9, YMaps.MapType.MAP);
    map.addControl(new YMaps.Zoom()
    map.addControl(new YMaps.ToolBar()
    map.addControl(new YMaps.TypeControl()


    Function createObject (type, point, style, description) {
    var allowObjects = [\"Placemark\", \"Polyline\", \"Polygon\"],
    index = YMaps.jQuery.inArray(type, allowObjects),
    constructor = allowObjects[(index == -1) ? 0: index];
    description = description || \"\";


    Var object = new YMaps(point, {style: style, hasBalloon: !!description}
    object.description = description;


    Return object;
    }
    }

    Вставленные теги вызывают синтаксическую ошибку javascript и карта отображаться не будет. Это происходит из-за того, что WordPress даже в режиме HTML делает автовставку переносов строк. Отключить такое поведение настройками в админ-панели нельзя

    Вариантов два: либо записать весь код в одну строку (в этом случае дальнейшее редактирование кода будет затруднено), либо поправить тему для WordPress, добавив туда дополнительную настройку. Поэтому лучше выбрать второй вариант.

    В используемой схеме в файл functions.php необходимо добавить следующую строчку:

    remove_filter("the_content", "wpautop");

    Например, для дефолтной темы файлик нужно искать по следующему пути: wp-content\\themes\\default\\functions.php.

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

    Данный плагин позволяет добавить на карту одну метку с названием и описанием. Метка и карта позиционируются с помощью геокодирования (т. е. координаты указать нельзя - только адрес)

    После того, как в редакторе карты введена необходимая информация, нужно нажать на кнопку \"Send Map to Editor\" и код для карты появится в редакторе текста.

    Редактор карты

    Редактор текста с кодом карты

    В результате будет отображена карта с открытым балуном

    Данный плагин может отображать либо карту с заданным центром и масштабом, либо YMapsML-файл. В RSS вместо интерактивной карты выводится статичная.

    Плагин ищет в редакторе текста строки вида или . В первом случае будет вставлена карта с заданным центром и масштабом, а во втором – отображен YMapsML, загруженный с адреса \"URL\".

    Таким образом можно отображать и данные, экспортированные из сервиса \"Мои карты\":

    Плагин имеет небольшую админку (которая находится в меню Параметры – Yandex Map (XML)), в которой можно указать API-ключ, начальный центр и масштаб карты, а также ее размеры.

    Настройка плагина

    Используемая версия в обзоре: 1.5.17

    По умолчанию в Joomla в качетве стандартного редактора используется TinyMCE.

    Если вставить код, то редактор удалит контейнер с картой, потому что он пустой. Это происходит из-за установленной опции clean для TinyMCE.

    Для того, чтобы контейнер для карты не вырезался, в него нужно написать либо какой-то текст

    map

    либо добавить внутрь контейнера комментарий

    Компонент дает возможность создавать неограниченное количество карт и меток (для меток можно задавать разные значки).

    Интерфейс редактирования карты

    Интерфейс редактирования метки

    Настройка внешнего вида метки

    Искать центр карты или местоположение метки можно с помощью специального встроенного инструмента.

    Инструмент для определения координат

    Для отображении карты в тексте статьи, необходимо вставить специальный код. Например,

    Эти коды отображаются в списке карт: http://YOUR_DOMAIN/admini strator/index.php?option= com_yandexmaps&view=yande xmapsmaps

    Список карт с кодами

    Сам этот компонент не умеет отображать карты в статьях. Для обработки кодов, которые отдает компонент, необходим еще дополнительный плагин.

    Вставить JavaScript легко во строенном редакторе, никаких проблем не наблюдается. Главное включить html-теги и отключить вставку автопереносов.

    С помощью css-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.

    Например, этот стиль приведет к растягивнию балуна:

    Его лучше заменить, например, на такой:

    Полный список конфликтов и их причин приведен на отдельной странице

    На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.

    Рассмотрены популярные бесплатные CMS и модули по работе с Яндекс.Картами. Освещены проблемы, которые могут возникнуть при вставке кода карт в эти CMS.

    Если вы знаете еще о каком-то подводном камне при использовании вышеперечисленных или других CMS, то напишите об этом в комментариях. Обо всех плагинах и модулях, не упомянутых в обзоре, также нам пишите. Мы обязательно добавим это в обзор.

    В данном разделе обсуждаются проблемы, связанные с конфликтами CSS-стилей, в результате которых карта или объекты на ней отображаются неверно.

    Первоначально мы решили осветить работу с такими CMS, как Drupal, Wordpress, Joomla и систему Ucoz. В сумме они занимают более 80% рынка бесплатных CMS по данным компании iTrack . DataLife Engine решили не учитывать, т. к. полная версия этой CMS - платная.

    Пожалуйста, учтите, что даже, проблемы у всех CMS схожие, поэтому даже если вашей CMS нет в списке, то прочитайте этот обзор полностью!

    В качестве основной задачи, принятой в данном обзоре, является вставка Яндекс.Карты на страницу без использованием или с использованием дополнительных плагинов/модулей. JavaScript-код, показывающий карту, был получен из инструмента "Конструктор схем проезда" .

    На настоящий момент список расмотренных CMS следующий:

    Используемая версия в обзоре: 6.16

    По умолчанию Drupal не снабжен визуальным редактором, редактирование контента осуществляется в обычных textarea.

    Разрешенные теги контролируются с помощью фильтров. После установки доступна два фильтра:

    • Filter HTML (по умолчанию).
    • Full HTML.

    В режиме Filter HTML тег не допускается, поэтому при использовании данного режима JavaScript-код будет отображен в виде обычного текста. Поэтому для вставки кода, отображающей карту, подходит только режим Full HTML (либо можно написать свой фильтр, который будет допускать ввод javascript).

    Интерфейс стандартного редактора
    Результат

    Карта, вставленная через стандартный редактор, отображается корректно. Однако html-комментарии (выделены красными прямоугольниками) не скрываются, а отображаются в опубликованной записи. Это баг самой CMS, поэтому перед вставкой кода их необходимо удалить вручную.

    При открытии балуна можно увидеть конфликт ccs-стилей, который приводит к разъезжанию балуна.

    Для устранения данного конфликта нужно в файле style.css (строка 193) убрать следующий стиль (или заменить на более частный):

    table {
    margin: 1em 0;
    width: 100%;
    }

    Рассмотрим самые популярные визуальные редакторы, используемые вместе с Drupal:

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

    Вставлять код нужно в режиме html (для этого в редакторе предусмотрена специальная кнопочка). TinyMCE вырезает атрибут src из тега <script> подключения API.

    Исправить поведение редактора с помощью настроек CMS нельзя, однако можно задать дополнительные параметры при инициализации TinyMCE: convert_urls и remove_script_host .

    Необходимо открыть файл modules\\tinymce\\tinymce\\j scripts\\tiny_mce\\tiny_mce _src.js и удалить строки с 1999 по 2002:

    // Convert the src attribute of the scriptsattribs = attribs.replace(/src=\\"([^\\"]+)\\"?/i, function(a, url) {if (s.url_converter)url = t.encode(s.url_converter. call(s.url_converter_scop e || t, t.decode(url), "src", "script"));return "_mce_src="" + url + """;}

    Вставить javascript-код можно без ухищрений, результат будет такой же, как и в случае со стандартным редактором.

    Данный модуль позволяет к любому типу контету добавлять карту с одной меткой

    Используемая версия в обзоре: 2.9.2

    CMS Word Press из коробки имеет свой визуальный редактор для текста с возможность переключения в режим редактирования HTML.

    WordPress "из коробки" имеет своей собственный редактор, который позволяет редактировать исходный код записи на вкладке HTML.

    Вставляем в режиме html любой javascript-код (например, полученный из конструктора) и на выходе получаем вот такое:

    YMaps.jQuery(function () {
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID-914")
    map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 9, YMaps.MapType.MAP);
    map.addControl(new YMaps.Zoom()
    map.addControl(new YMaps.ToolBar()
    map.addControl(new YMaps.TypeControl()


    Function createObject (type, point, style, description) {
    var allowObjects = ["Placemark", "Polyline", "Polygon"],
    index = YMaps.jQuery.inArray(type, allowObjects),
    constructor = allowObjects[(index == -1) ? 0: index];
    description = description || "";


    Var object = new YMaps(point, {style: style, hasBalloon: !!description}
    object.description = description;


    Return object;
    }
    }

    Вставленные теги вызывают синтаксическую ошибку javascript и карта отображаться не будет. Это происходит из-за того, что WordPress даже в режиме HTML делает автовставку переносов строк. Отключить такое поведение настройками в админ-панели нельзя

    Вариантов два: либо записать весь код в одну строку (в этом случае дальнейшее редактирование кода будет затруднено), либо поправить тему для WordPress, добавив туда дополнительную настройку. Поэтому лучше выбрать второй вариант.

    В используемой схеме в файл functions.php необходимо добавить следующую строчку:

    remove_filter("the_content", "wpautop");

    Например, для дефолтной темы файлик нужно искать по следующему пути: wp-content\\themes\\default\\functions.php.

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

    Данный плагин позволяет добавить на карту одну метку с названием и описанием. Метка и карта позиционируются с помощью геокодирования (т. е. координаты указать нельзя - только адрес)

    После того, как в редакторе карты введена необходимая информация, нужно нажать на кнопку "Send Map to Editor" и код для карты появится в редакторе текста.

    Редактор карты

    Редактор текста с кодом карты

    В результате будет отображена карта с открытым балуном

    Данный плагин может отображать либо карту с заданным центром и масштабом, либо YMapsML-файл. В RSS вместо интерактивной карты выводится статичная.

    Плагин ищет в редакторе текста строки вида или . В первом случае будет вставлена карта с заданным центром и масштабом, а во втором – отображен YMapsML, загруженный с адреса "URL".

    Таким образом можно отображать и данные, экспортированные из сервиса "Мои карты":

    Плагин имеет небольшую админку (которая находится в меню Параметры – Yandex Map (XML)), в которой можно указать API-ключ, начальный центр и масштаб карты, а также ее размеры.

    Настройка плагина

    По умолчанию в Joomla в качетве стандартного редактора используется TinyMCE.

    Если вставить код, то редактор удалит контейнер с картой, потому что он пустой. Это происходит из-за установленной опции clean для TinyMCE.

    Для того, чтобы контейнер для карты не вырезался, в него нужно написать либо какой-то текст

    map

    либо добавить внутрь контейнера комментарий

    Компонент дает возможность создавать неограниченное количество карт и меток (для меток можно задавать разные значки).

    Интерфейс редактирования карты

    Интерфейс редактирования метки

    Настройка внешнего вида метки

    Искать центр карты или местоположение метки можно с помощью специального встроенного инструмента.

    Инструмент для определения координат

    Для отображении карты в тексте статьи, необходимо вставить специальный код. Например,

    Эти коды отображаются в списке карт: http://YOUR_DOMAIN/admini strator/index.php?option= com_yandexmaps&view=yande xmapsmaps

    Список карт с кодами

    Сам этот компонент не умеет отображать карты в статьях. Для обработки кодов, которые отдает компонент, необходим еще дополнительный плагин.

    Вставить JavaScript легко во строенном редакторе, никаких проблем не наблюдается. Главное включить html-теги и отключить вставку автопереносов.

    С помощью css-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.

    Например, этот стиль приведет к растягивнию балуна:

    Его лучше заменить, например, на такой:

    Полный список конфликтов и их причин приведен на отдельной странице

    ","contentType":"text/html"},"authorId":"46613964","slug":"10235","canEdit":false,"canComment":false,"isBanned":false,"canPublish":false,"viewType":"old","isDraft":false,"isOnModeration":false,"isSubscriber":false,"commentsCount":158,"modificationDate":"Fri Mar 23 2012 02:36:00 GMT+0000 (UTC)","showPreview":true,"approvedPreview":{"source":"

    На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.

    Рассмотрены популярные бесплатные CMS и модули по работе с Яндекс.Картами. Освещены проблемы, которые могут возникнуть при вставке кода карт в эти CMS.

    Если вы знаете еще о каком-то подводном камне при использовании вышеперечисленных или других CMS, то напишите об этом в комментариях. Обо всех плагинах и модулях, не упомянутых в обзоре, также нам пишите. Мы обязательно добавим это в обзор.

    В данном разделе обсуждаются проблемы, связанные с конфликтами CSS-стилей, в результате которых карта или объекты на ней отображаются неверно.

    Первоначально мы решили осветить работу с такими CMS, как Drupal, Wordpress, Joomla и систему Ucoz. В сумме они занимают более 80% рынка бесплатных CMS по данным компании iTrack . DataLife Engine решили не учитывать, т. к. полная версия этой CMS - платная.

    Пожалуйста, учтите, что даже, проблемы у всех CMS схожие, поэтому даже если вашей CMS нет в списке, то прочитайте этот обзор полностью!

    В качестве основной задачи, принятой в данном обзоре, является вставка Яндекс.Карты на страницу без использованием или с использованием дополнительных плагинов/модулей. JavaScript-код, показывающий карту, был получен из инструмента "Конструктор схем проезда" .

    На настоящий момент список расмотренных CMS следующий:

    Используемая версия в обзоре: 6.16

    По умолчанию Drupal не снабжен визуальным редактором, редактирование контента осуществляется в обычных textarea.

    Разрешенные теги контролируются с помощью фильтров. После установки доступна два фильтра:

    • Filter HTML (по умолчанию).
    • Full HTML.

    В режиме Filter HTML тег не допускается, поэтому при использовании данного режима JavaScript-код будет отображен в виде обычного текста. Поэтому для вставки кода, отображающей карту, подходит только режим Full HTML (либо можно написать свой фильтр, который будет допускать ввод javascript).

    Интерфейс стандартного редактора
    Результат

    Карта, вставленная через стандартный редактор, отображается корректно. Однако html-комментарии (выделены красными прямоугольниками) не скрываются, а отображаются в опубликованной записи. Это баг самой CMS, поэтому перед вставкой кода их необходимо удалить вручную.

    При открытии балуна можно увидеть конфликт ccs-стилей, который приводит к разъезжанию балуна.

    Для устранения данного конфликта нужно в файле style.css (строка 193) убрать следующий стиль (или заменить на более частный):

    table {
    margin: 1em 0;
    width: 100%;
    }

    Рассмотрим самые популярные визуальные редакторы, используемые вместе с Drupal:

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

    Вставлять код нужно в режиме html (для этого в редакторе предусмотрена специальная кнопочка). TinyMCE вырезает атрибут src из тега <script> подключения API.

    Исправить поведение редактора с помощью настроек CMS нельзя, однако можно задать дополнительные параметры при инициализации TinyMCE: convert_urls и remove_script_host .

    Необходимо открыть файл modules\\tinymce\\tinymce\\j scripts\\tiny_mce\\tiny_mce _src.js и удалить строки с 1999 по 2002:

    // Convert the src attribute of the scriptsattribs = attribs.replace(/src=\\"([^\\"]+)\\"?/i, function(a, url) {if (s.url_converter)url = t.encode(s.url_converter. call(s.url_converter_scop e || t, t.decode(url), "src", "script"));return "_mce_src="" + url + """;}

    Вставить javascript-код можно без ухищрений, результат будет такой же, как и в случае со стандартным редактором.

    Данный модуль позволяет к любому типу контету добавлять карту с одной меткой

    Используемая версия в обзоре: 2.9.2

    CMS Word Press из коробки имеет свой визуальный редактор для текста с возможность переключения в режим редактирования HTML.

    WordPress "из коробки" имеет своей собственный редактор, который позволяет редактировать исходный код записи на вкладке HTML.

    Вставляем в режиме html любой javascript-код (например, полученный из конструктора) и на выходе получаем вот такое:

    YMaps.jQuery(function () {
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID-914")
    map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 9, YMaps.MapType.MAP);
    map.addControl(new YMaps.Zoom()
    map.addControl(new YMaps.ToolBar()
    map.addControl(new YMaps.TypeControl()


    Function createObject (type, point, style, description) {
    var allowObjects = ["Placemark", "Polyline", "Polygon"],
    index = YMaps.jQuery.inArray(type, allowObjects),
    constructor = allowObjects[(index == -1) ? 0: index];
    description = description || "";


    Var object = new YMaps(point, {style: style, hasBalloon: !!description}
    object.description = description;


    Return object;
    }
    }

    Вставленные теги вызывают синтаксическую ошибку javascript и карта отображаться не будет. Это происходит из-за того, что WordPress даже в режиме HTML делает автовставку переносов строк. Отключить такое поведение настройками в админ-панели нельзя

    Вариантов два: либо записать весь код в одну строку (в этом случае дальнейшее редактирование кода будет затруднено), либо поправить тему для WordPress, добавив туда дополнительную настройку. Поэтому лучше выбрать второй вариант.

    В используемой схеме в файл functions.php необходимо добавить следующую строчку:

    remove_filter("the_content", "wpautop");

    Например, для дефолтной темы файлик нужно искать по следующему пути: wp-content\\themes\\default\\functions.php.

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

    Данный плагин позволяет добавить на карту одну метку с названием и описанием. Метка и карта позиционируются с помощью геокодирования (т. е. координаты указать нельзя - только адрес)

    После того, как в редакторе карты введена необходимая информация, нужно нажать на кнопку "Send Map to Editor" и код для карты появится в редакторе текста.

    Редактор карты

    Редактор текста с кодом карты

    В результате будет отображена карта с открытым балуном

    Данный плагин может отображать либо карту с заданным центром и масштабом, либо YMapsML-файл. В RSS вместо интерактивной карты выводится статичная.

    Плагин ищет в редакторе текста строки вида или . В первом случае будет вставлена карта с заданным центром и масштабом, а во втором – отображен YMapsML, загруженный с адреса "URL".

    Таким образом можно отображать и данные, экспортированные из сервиса "Мои карты":

    Плагин имеет небольшую админку (которая находится в меню Параметры – Yandex Map (XML)), в которой можно указать API-ключ, начальный центр и масштаб карты, а также ее размеры.

    Настройка плагина

    По умолчанию в Joomla в качетве стандартного редактора используется TinyMCE.

    Если вставить код, то редактор удалит контейнер с картой, потому что он пустой. Это происходит из-за установленной опции clean для TinyMCE.

    Для того, чтобы контейнер для карты не вырезался, в него нужно написать либо какой-то текст

    map

    либо добавить внутрь контейнера комментарий

    Компонент дает возможность создавать неограниченное количество карт и меток (для меток можно задавать разные значки).

    Интерфейс редактирования карты

    Интерфейс редактирования метки

    Настройка внешнего вида метки

    Искать центр карты или местоположение метки можно с помощью специального встроенного инструмента.

    Инструмент для определения координат

    Для отображении карты в тексте статьи, необходимо вставить специальный код. Например,

    Эти коды отображаются в списке карт: http://YOUR_DOMAIN/admini strator/index.php?option= com_yandexmaps&view=yande xmapsmaps

    Список карт с кодами

    Сам этот компонент не умеет отображать карты в статьях. Для обработки кодов, которые отдает компонент, необходим еще дополнительный плагин.

    Вставить JavaScript легко во строенном редакторе, никаких проблем не наблюдается. Главное включить html-теги и отключить вставку автопереносов.

    С помощью css-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.

    Например, этот стиль приведет к растягивнию балуна:

    Его лучше заменить, например, на такой:

    Полный список конфликтов и их причин приведен на отдельной странице

    ","html":"

    На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.

    Рассмотрены популярные бесплатные CMS и модули по работе с Яндекс.Картами. Освещены проблемы, которые могут возникнуть при вставке кода карт в эти CMS.

    Если вы знаете еще о каком-то подводном камне при использовании вышеперечисленных или других CMS, то напишите об этом в комментариях. Обо всех плагинах и модулях, не упомянутых в обзоре, также нам пишите. Мы обязательно добавим это в обзор.

    В данном разделе обсуждаются проблемы, связанные с конфликтами CSS-стилей, в результате которых карта или объекты на ней отображаются неверно.

    ","contentType":"text/html"},"proposedPreview":{"source":"

    На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.

    Рассмотрены популярные бесплатные CMS и модули по работе с Яндекс.Картами. Освещены проблемы, которые могут возникнуть при вставке кода карт в эти CMS.

    Если вы знаете еще о каком-то подводном камне при использовании вышеперечисленных или других CMS, то напишите об этом в комментариях. Обо всех плагинах и модулях, не упомянутых в обзоре, также нам пишите. Мы обязательно добавим это в обзор.

    В данном разделе обсуждаются проблемы, связанные с конфликтами CSS-стилей, в результате которых карта или объекты на ней отображаются неверно.

    Первоначально мы решили осветить работу с такими CMS, как Drupal, Wordpress, Joomla и систему Ucoz. В сумме они занимают более 80% рынка бесплатных CMS по данным компании iTrack . DataLife Engine решили не учитывать, т. к. полная версия этой CMS - платная.

    Пожалуйста, учтите, что даже, проблемы у всех CMS схожие, поэтому даже если вашей CMS нет в списке, то прочитайте этот обзор полностью!

    В качестве основной задачи, принятой в данном обзоре, является вставка Яндекс.Карты на страницу без использованием или с использованием дополнительных плагинов/модулей. JavaScript-код, показывающий карту, был получен из инструмента "Конструктор схем проезда" .

    На настоящий момент список расмотренных CMS следующий:

    Используемая версия в обзоре: 6.16

    По умолчанию Drupal не снабжен визуальным редактором, редактирование контента осуществляется в обычных textarea.

    Разрешенные теги контролируются с помощью фильтров. После установки доступна два фильтра:

    • Filter HTML (по умолчанию).
    • Full HTML.

    В режиме Filter HTML тег не допускается, поэтому при использовании данного режима JavaScript-код будет отображен в виде обычного текста. Поэтому для вставки кода, отображающей карту, подходит только режим Full HTML (либо можно написать свой фильтр, который будет допускать ввод javascript).

    Интерфейс стандартного редактора
    Результат

    Карта, вставленная через стандартный редактор, отображается корректно. Однако html-комментарии (выделены красными прямоугольниками) не скрываются, а отображаются в опубликованной записи. Это баг самой CMS, поэтому перед вставкой кода их необходимо удалить вручную.

    При открытии балуна можно увидеть конфликт ccs-стилей, который приводит к разъезжанию балуна.

    Для устранения данного конфликта нужно в файле style.css (строка 193) убрать следующий стиль (или заменить на более частный):

    table {
    margin: 1em 0;
    width: 100%;
    }

    Рассмотрим самые популярные визуальные редакторы, используемые вместе с Drupal:

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

    Вставлять код нужно в режиме html (для этого в редакторе предусмотрена специальная кнопочка). TinyMCE вырезает атрибут src из тега <script> подключения API.

    Исправить поведение редактора с помощью настроек CMS нельзя, однако можно задать дополнительные параметры при инициализации TinyMCE: convert_urls и remove_script_host .

    Необходимо открыть файл modules\\tinymce\\tinymce\\j scripts\\tiny_mce\\tiny_mce _src.js и удалить строки с 1999 по 2002:

    // Convert the src attribute of the scriptsattribs = attribs.replace(/src=\\"([^\\"]+)\\"?/i, function(a, url) {if (s.url_converter)url = t.encode(s.url_converter. call(s.url_converter_scop e || t, t.decode(url), "src", "script"));return "_mce_src="" + url + """;}

    Вставить javascript-код можно без ухищрений, результат будет такой же, как и в случае со стандартным редактором.

    Данный модуль позволяет к любому типу контету добавлять карту с одной меткой

    Используемая версия в обзоре: 2.9.2

    CMS Word Press из коробки имеет свой визуальный редактор для текста с возможность переключения в режим редактирования HTML.

    WordPress "из коробки" имеет своей собственный редактор, который позволяет редактировать исходный код записи на вкладке HTML.

    Вставляем в режиме html любой javascript-код (например, полученный из конструктора) и на выходе получаем вот такое:

    YMaps.jQuery(function () {
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID-914")
    map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 9, YMaps.MapType.MAP);
    map.addControl(new YMaps.Zoom()
    map.addControl(new YMaps.ToolBar()
    map.addControl(new YMaps.TypeControl()


    Function createObject (type, point, style, description) {
    var allowObjects = ["Placemark", "Polyline", "Polygon"],
    index = YMaps.jQuery.inArray(type, allowObjects),
    constructor = allowObjects[(index == -1) ? 0: index];
    description = description || "";


    Var object = new YMaps(point, {style: style, hasBalloon: !!description}
    object.description = description;


    Return object;
    }
    }

    Вставленные теги вызывают синтаксическую ошибку javascript и карта отображаться не будет. Это происходит из-за того, что WordPress даже в режиме HTML делает автовставку переносов строк. Отключить такое поведение настройками в админ-панели нельзя

    Вариантов два: либо записать весь код в одну строку (в этом случае дальнейшее редактирование кода будет затруднено), либо поправить тему для WordPress, добавив туда дополнительную настройку. Поэтому лучше выбрать второй вариант.

    В используемой схеме в файл functions.php необходимо добавить следующую строчку:

    remove_filter("the_content", "wpautop");

    Например, для дефолтной темы файлик нужно искать по следующему пути: wp-content\\themes\\default\\functions.php.

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

    Данный плагин позволяет добавить на карту одну метку с названием и описанием. Метка и карта позиционируются с помощью геокодирования (т. е. координаты указать нельзя - только адрес)

    После того, как в редакторе карты введена необходимая информация, нужно нажать на кнопку "Send Map to Editor" и код для карты появится в редакторе текста.

    Редактор карты

    Редактор текста с кодом карты

    В результате будет отображена карта с открытым балуном

    Данный плагин может отображать либо карту с заданным центром и масштабом, либо YMapsML-файл. В RSS вместо интерактивной карты выводится статичная.

    Плагин ищет в редакторе текста строки вида или . В первом случае будет вставлена карта с заданным центром и масштабом, а во втором – отображен YMapsML, загруженный с адреса "URL".

    Таким образом можно отображать и данные, экспортированные из сервиса "Мои карты":

    Плагин имеет небольшую админку (которая находится в меню Параметры – Yandex Map (XML)), в которой можно указать API-ключ, начальный центр и масштаб карты, а также ее размеры.

    Настройка плагина

    По умолчанию в Joomla в качетве стандартного редактора используется TinyMCE.

    Если вставить код, то редактор удалит контейнер с картой, потому что он пустой. Это происходит из-за установленной опции clean для TinyMCE.

    Для того, чтобы контейнер для карты не вырезался, в него нужно написать либо какой-то текст

    map

    либо добавить внутрь контейнера комментарий

    Компонент дает возможность создавать неограниченное количество карт и меток (для меток можно задавать разные значки).

    Интерфейс редактирования карты

    Интерфейс редактирования метки

    Настройка внешнего вида метки

    Искать центр карты или местоположение метки можно с помощью специального встроенного инструмента.

    Инструмент для определения координат

    Для отображении карты в тексте статьи, необходимо вставить специальный код. Например,

    Эти коды отображаются в списке карт: http://YOUR_DOMAIN/admini strator/index.php?option= com_yandexmaps&view=yande xmapsmaps

    Список карт с кодами

    Сам этот компонент не умеет отображать карты в статьях. Для обработки кодов, которые отдает компонент, необходим еще дополнительный плагин.

    Вставить JavaScript легко во строенном редакторе, никаких проблем не наблюдается. Главное включить html-теги и отключить вставку автопереносов.

    С помощью css-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.

    Например, этот стиль приведет к растягивнию балуна:

    Его лучше заменить, например, на такой:

    Полный список конфликтов и их причин приведен на отдельной странице

    ","html":"

    На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.

    Рассмотрены популярные бесплатные CMS и модули по работе с Яндекс.Картами. Освещены проблемы, которые могут возникнуть при вставке кода карт в эти CMS.

    Если вы знаете еще о каком-то подводном камне при использовании вышеперечисленных или других CMS, то напишите об этом в комментариях. Обо всех плагинах и модулях, не упомянутых в обзоре, также нам пишите. Мы обязательно добавим это в обзор.

    В данном разделе обсуждаются проблемы, связанные с конфликтами CSS-стилей, в результате которых карта или объекты на ней отображаются неверно.

    ","contentType":"text/html"},"titleImage":null,"tags":[{"displayName":"CMS","slug":"cms","categoryId":"1829589","url":"/blog/mapsapi??tag=cms"},{"displayName":"статьи","slug":"stati","categoryId":"2472354","url":"/blog/mapsapi??tag=stati"},{"displayName":"API 1.x","slug":"api-1-x","categoryId":"150000131","url":"/blog/mapsapi??tag=api-1-x"}],"isModerator":false,"commentsEnabled":true,"url":"/blog/mapsapi/10235","urlTemplate":"/blog/mapsapi/%slug%","fullBlogUrl":"https://yandex.ru/blog/mapsapi","addCommentUrl":"/blog/createComment/mapsapi/10235","updateCommentUrl":"/blog/updateComment/mapsapi/10235","addCommentWithCaptcha":"/blog/createWithCaptcha/mapsapi/10235","changeCaptchaUrl":"/blog/api/captcha/new","putImageUrl":"/blog/image/put","urlBlog":"/blog/mapsapi","urlEditPost":"/blog/56a99916b15b79e31e0d65a6/edit","urlSlug":"/blog/post/generateSlug","urlPublishPost":"/blog/56a99916b15b79e31e0d65a6/publish","urlUnpublishPost":"/blog/56a99916b15b79e31e0d65a6/unpublish","urlRemovePost":"/blog/56a99916b15b79e31e0d65a6/removePost","urlDraft":"/blog/mapsapi/10235/draft","urlDraftTemplate":"/blog/mapsapi/%slug%/draft","urlRemoveDraft":"/blog/56a99916b15b79e31e0d65a6/removeDraft","urlTagSuggest":"/blog/api/suggest/mapsapi","urlAfterDelete":"/blog/mapsapi","isAuthor":false,"subscribeUrl":"/blog/api/subscribe/56a99916b15b79e31e0d65a6","unsubscribeUrl":"/blog/api/unsubscribe/56a99916b15b79e31e0d65a6","urlEditPostPage":"/blog/mapsapi/56a99916b15b79e31e0d65a6/edit","urlForTranslate":"/blog/post/translate","urlRelateIssue":"/blog/post/updateIssue","urlUpdateTranslate":"/blog/post/updateTranslate","urlLoadTranslate":"/blog/post/loadTranslate","urlTranslationStatus":"/blog/mapsapi/10235/translationInfo","urlRelatedArticles":"/blog/api/relatedArticles/mapsapi/10235","author":{"id":"46613964","uid":{"value":"46613964","lite":false,"hosted":false},"aliases":{},"login":"rodlex","display_name":{"name":"rodlex","avatar":{"default":"20706/46613964-3050831","empty":false}},"address":"[email protected]","defaultAvatar":"20706/46613964-3050831","imageSrc":"https://avatars.mds.yandex.net/get-yapic/20706/46613964-3050831/islands-middle","isYandexStaff":false},"originalModificationDate":"2012-03-22T22:36:50.000Z","socialImage":{"orig":{"fullPath":"https://avatars.mds.yandex.net/get-yablogs/47421/file_1456488726678/orig"}}}}}"> . DataLife Engine решили не учитывать, т. к. полная версия этой CMS - платная.

    Пожалуйста, учтите, что даже, проблемы у всех CMS схожие, поэтому даже если вашей CMS нет в списке, то прочитайте этот обзор полностью!

    В качестве основной задачи, принятой в данном обзоре, является вставка Яндекс.Карты на страницу без использованием или с использованием дополнительных плагинов/модулей. JavaScript-код, показывающий карту, был получен из инструмента .

    На настоящий момент список расмотренных CMS следующий:

    Используемая версия в обзоре: 6.16

    По умолчанию Drupal не снабжен визуальным редактором, редактирование контента осуществляется в обычных textarea.

    Разрешенные теги контролируются с помощью фильтров. После установки доступна два фильтра:

    • Filter HTML (по умолчанию).
    • Full HTML.

    В режиме Filter HTML тег не допускается, поэтому при использовании данного режима JavaScript-код будет отображен в виде обычного текста. Поэтому для вставки кода, отображающей карту, подходит только режим Full HTML (либо можно написать свой фильтр, который будет допускать ввод javascript).

    Интерфейс стандартного редактора
    Результат

    Карта, вставленная через стандартный редактор, отображается корректно. Однако html-комментарии (выделены красными прямоугольниками) не скрываются, а отображаются в опубликованной записи. Это баг самой CMS, поэтому перед вставкой кода их необходимо удалить вручную.

    При открытии балуна можно увидеть конфликт ccs-стилей, который приводит к разъезжанию балуна.

    Для устранения данного конфликта нужно в файле style.css (строка 193) убрать следующий стиль (или заменить на более частный):

    table {
    margin: 1em 0;
    width: 100%;
    }

    Рассмотрим самые популярные визуальные редакторы, используемые вместе с Drupal:

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

    Вставлять код нужно в режиме html (для этого в редакторе предусмотрена специальная кнопочка). TinyMCE вырезает атрибут src из тега <script> подключения API.

    Исправить поведение редактора с помощью настроек CMS нельзя, однако можно задать дополнительные параметры при инициализации TinyMCE: convert_urls и remove_script_host .

    Необходимо открыть файл modules\tinymce\tinymce\j scripts\tiny_mce\tiny_mce _src.js и удалить строки с 1999 по 2002:

    // Convert the src attribute of the scriptsattribs = attribs.replace(/src=\"([^\"]+)\"?/i, function(a, url) {if (s.url_converter)url = t.encode(s.url_converter. call(s.url_converter_scop e || t, t.decode(url), "src", "script"));return "_mce_src="" + url + """;}

    Используемая версия в обзоре: 2.9.2

    CMS Word Press из коробки имеет свой визуальный редактор для текста с возможность переключения в режим редактирования HTML.

    WordPress "из коробки" имеет своей собственный редактор, который позволяет редактировать исходный код записи на вкладке HTML.

    Вставляем в режиме html любой javascript-код (например, полученный из конструктора) и на выходе получаем вот такое:

    YMaps.jQuery(function () {
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID-914")
    map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 9, YMaps.MapType.MAP);
    map.addControl(new YMaps.Zoom()
    map.addControl(new YMaps.ToolBar()
    map.addControl(new YMaps.TypeControl()


    Function createObject (type, point, style, description) {
    var allowObjects = ["Placemark", "Polyline", "Polygon"],
    index = YMaps.jQuery.inArray(type, allowObjects),
    constructor = allowObjects[(index == -1) ? 0: index];
    description = description || "";


    Var object = new YMaps(point, {style: style, hasBalloon: !!description}
    object.description = description;


    Return object;
    }
    }

    Вставленные теги вызывают синтаксическую ошибку javascript и карта отображаться не будет. Это происходит из-за того, что WordPress даже в режиме HTML делает автовставку переносов строк. Отключить такое поведение настройками в админ-панели нельзя

    Вариантов два: либо записать весь код в одну строку (в этом случае дальнейшее редактирование кода будет затруднено), либо поправить тему для WordPress, добавив туда дополнительную настройку. Поэтому лучше выбрать второй вариант.

    В используемой схеме в файл functions.php необходимо добавить следующую строчку:

    remove_filter("the_content", "wpautop");

    Например, для дефолтной темы файлик нужно искать по следующему пути: wp-content\themes\default\functions.php.

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

    Данный плагин позволяет добавить на карту одну метку с названием и описанием. Метка и карта позиционируются с помощью геокодирования (т. е. координаты указать нельзя - только адрес)

    После того, как в редакторе карты введена необходимая информация, нужно нажать на кнопку "Send Map to Editor" и код для карты появится в редакторе текста.

    Редактор карты

    Редактор текста с кодом карты

    В результате будет отображена карта с открытым балуном

    Данный плагин может отображать либо карту с заданным центром и масштабом, либо YMapsML-файл. В RSS вместо интерактивной карты выводится статичная.

    Плагин ищет в редакторе текста строки вида или . В первом случае будет вставлена карта с заданным центром и масштабом, а во втором – отображен YMapsML, загруженный с адреса "URL".

    Таким образом можно отображать и данные, экспортированные из сервиса "Мои карты":

    Плагин имеет небольшую админку (которая находится в меню Параметры – Yandex Map (XML)), в которой можно указать API-ключ, начальный центр и масштаб карты, а также ее размеры.

    Настройка плагина

    Используемая версия в обзоре: 1.5.17

    По умолчанию в Joomla в качетве стандартного редактора используется TinyMCE.

    Если вставить код, то редактор удалит контейнер с картой, потому что он пустой. Это происходит из-за установленной опции clean для TinyMCE.

    Для того, чтобы контейнер для карты не вырезался, в него нужно написать либо какой-то текст

    map

    либо добавить внутрь контейнера комментарий

    Компонент дает возможность создавать неограниченное количество карт и меток (для меток можно задавать разные значки).

    Интерфейс редактирования карты

    Интерфейс редактирования метки

    Настройка внешнего вида метки

    Искать центр карты или местоположение метки можно с помощью специального встроенного инструмента.

    Инструмент для определения координат

    Для отображении карты в тексте статьи, необходимо вставить специальный код. Например,

    Эти коды отображаются в списке карт: http://YOUR_DOMAIN/admini strator/index.php?option= com_yandexmaps&view=yande xmapsmaps

    Список карт с кодами

    Сам этот компонент не умеет отображать карты в статьях. Для обработки кодов, которые отдает компонент, необходим еще дополнительный плагин.

    Вставить JavaScript легко во строенном редакторе, никаких проблем не наблюдается. Главное включить html-теги и отключить вставку автопереносов.

    С помощью css-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.

    Например, этот стиль приведет к растягивнию балуна:

    Его лучше заменить, например, на такой:

    Полный список конфликтов и их причин приведен на отдельной странице

    Статьи по теме: