Map плагин. Плагин Google и Яндекс карта WordPress. Размещение через Yandex API

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

Yandex Maps for WordPress – встроить карту на сайт легко!

Yandex Maps for WordPress – плагин Яндекс карт, который с легкостью позволяет встроить в запись или на страницу сайта интерактивную карту.

Скачать Вордпресс плагин Яндекс карт можно тут: http://wordpress.org/plugins/yandex-maps-for-wordpress/ , либо установить сразу из консоли WP , воспользовавшись встроенным поиском плагинов.

Для того, чтобы карта работала на сайте, необходимо получить API-ключ. Сделать это можно тут:

Все что нужно – это ввести адрес сайта, на котором будет использоваться ключ. Если используете локальный сервер (Денвер), то вводите соответствующий локальный адрес. Однако, не забудьте после установки на хостинг, получить новый ключ.

Подтвердите, что ознакомились с пользовательским соглашением и нажмите «Получить API-ключ».

Этот ключ необходимо скопировать и вставить в подтверждающее окно и нажать «Применить»:

Вот собственно и все, WordPress плагин Яндекс карт полностью готов к работе.

Теперь можно зайти на страницу или в запись и вы увидите поле вставки Яндекс карты.

Location Name – заголовок точки (маркера).

Address – указание адреса маркера.

Location Description – описание.

Map Width – ширина карты в пикселях.

Map Height – высота карты.

Enable Zoom/Pan Controls – опции приближения, панели управления.

Enable Map Type Controls (Map, Satellite, or Hybrid) – включить возможность переключить на карту гибрид или сателлит.

Вот такая карта получится на выходе:

Как по мне, я бы отказался от плагина и просто вставил код карты на сайт. Это позволяет сделать более гибкие и широкие настройки.

Вставляем карту Google в WordPress с помощью плагина

MapPress Easy Google Maps – WordPress плагин Гугл карт.

Установив данный плагин можно без труда добавить на сайт Google карту .

В отличие от Плагина Яндекс карт, описанного выше, в MapPress Easy Google Maps никаких API-ключей не нужно. После установки, можно перейти в раздел добавления записей или страниц и начать создавать карту.

Жмем «New map» :

В поле Map Title задаем заголовок карты.

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

Add POI – задаем местонахождение, точку, где будет расположен маркер. Достаточно просто ввести в это поле нужный адрес. Например: Славутич, Белый ангел .

Точек можно задать сколько угодно.

При нажатии на маркер, откроется окно редактирования:

Можно красиво оформить текст, который будет отображаться с помощью встроенной панели форматирования.

Есть функция вставки картинок, которые будут отображаться при клике по маркеру.

И что очень приятно - есть режим редактирования HTML.

В общем, WordPress плагин Google карт определенно предоставляет больше возможностей, нежели плагин Яндекс карт.

После того, как закончили делать основные настройки, нужно сохранить карту (save) и вставить в запись (insert into post).

Вот такая симпатичная карта получилась:

Разместить на своем сайте карту со схемой проезда к вашему офису не сложно, это делается буквально в несколько кликов. И об этом уже написано множество статей и инструкций.


На данный момент самые популярные геоинформационные сервисы - это по-прежнему карты Google и Яндекс . Ну, может быть, еще 2ГИС и GeoMixer.

Все популярные сервисы имеют свой собственный API с очень даже широкими возможностями. Используя который, можно создавать вполне приличные и очень полезные геоинформационные веб-приложения. В вашем распоряжении подробнейшая картографическая основа с не менее подробной информационной базой. Сфера применения геоинформационных сервисов очень широка. Начиная от банального размещения каких-то объектов на карте местности до геолокации и отслеживания перемещений объектов в реальном времени. Да, сегодня это вполне тривиальные задачи, без которых современная логистика уже вряд ли сможет обойтись.

В отличие от российских конкурентов, Google Maps - сервис международного масштаба, абсолютный лидер в своей области.

Карты Google (англ. Google Maps; ранее Google Local) - набор приложений, построенных на основе бесплатного картографического сервиса и технологии, предоставляемых компанией Google.

Естественно, все самые интересные геоинформационные плагины для WordPress разрабатываются исключительно на базе Google Maps. Поэтому, мы будем рассматривать плагины лишь в его контексте.

1. MapPress Easy Google Maps

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

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

Еще один бесплатный плагин Google Maps со встроенным виджетом. С помощью этого плагина можно так же легко создавать карты, задавать направления, устанавливать маркеры и многое другое.

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

Простой виджет Google Maps, который без лишних движений просто выведет в сайдбаре вашу карту.

Плагин позволяет создать сортированный по категориям список меток, а затем с помощью шорткода вывести их на карте.

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

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

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

Простая в использовании полнофункциональная карта Google с 35-ю встроенными темами оформления, которая позволит быстро вывести на карту ваши объекты. Например, сеть ваших магазинов, офисов и т.д.

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

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

Еще один очень мощный и весьма полезный плагин из серии вывода на карту списка объектов. Например, списка филиалов магазина, отелей, объектов недвижимости, ресторанов, списка вакансий и т.д.

Самый продаваемый плагин Google Maps с минимумом функций и максимумом удобств.

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

Простой и удобный плагин внедрения карт Google в WordPress с поддержкой адаптивного дизайна.

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

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

Добавить карту на ваш веб-сайт WordPress - очень легко. С помощью Карт Google вы можете скопировать и вставить предоставленный код для вставки на свою страницу или опубликовать с помощью HTML-редактора WordPress. Но если вы хотите добавить некоторые дополнительные функции, вы можете обратиться за помощью к некоторым классным плагинам.

Вот 10 бесплатных плагинов WordPress, которые позволят вам как добавлять, так и расширять функциональность карты на вашем сайте:

Maps Builder предоставляет вам более интерактивный подход к созданию карты. Вы сможете построить несколько местоположений, настроить маркеры карты и даже использовать разные темы с помощью Snazzy Maps. Все это интегрировано в привлекательный и простой в использовании пользовательский интерфейс.

Если ваша компания имеет несколько местоположений, используйте локатор WP Store, чтобы добавить удобные интерактивные карты на ваш веб-сайт. Пользователи смогут фильтровать местоположения по их радиусу и получать маршруты проезда к каждому местоположению. Вы сможете добавлять важную информацию, такую как номера телефонов, часы работы и другую пользовательскую метаинформацию в каждом местоположении. Внешний вид вашей карты также настраивается.

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

Используя GPX-файл в качестве источника, карты WP GPX будут отображать интерактивные карты с такими характеристиками, как высота, скорость, пульс и температура. Эта функциональность может быть полезна для построения гоночных трасс или отслеживания фитнес данных.

SO Mobile Widget Map оптимизирован для использования с мобильными устройствами. Он отобразит статичную карту Google с выровненным центром в нужном месте. Когда вы нажимаете (или постукиваете), Google Maps открывается. Затем пользователи могут заполнить свое текущее местоположение, чтобы получить указания.

Сделайте ценный вклад в карты от вашего онлайн-сообщества с помощью: CM Maps Routes Manager. Пользователи могут рисовать свои собственные маршруты на карте, а также добавлять интересные объекты и фотографии. Включите пешеходные, велосипедные, маршруты вождения и многое другое. Карты можно искать по местоположению или категориям.

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

WP Design Maps & Places не является стандартным плагином для отображения, поскольку он нацелен на обеспечение гораздо более высокого уровня настройки. Вы сможете самостоятельно разработать карту, которая будет соответствовать установленному внешнему виду вашего веб-сайта. Вы также можете выбрать, использовать или нет данные геолокации, предоставляя дополнительные возможности.

Вместо отображения Карт Google в вашем контенте Google Map с FancyBox Popup позволяет отображать его во всплывающем окне. Это может быть отличном решением для сайтов, которым нужно показывать несколько карт, не влияя на производительность, или если вы не хотите, чтобы они отвлекали внимание от другого контента.

Используйте GeoDirectory - Directory Plugin, чтобы создать глобальный (или региональный) бизнес-каталог или каталог для вашего веб-сайта. Плагин поддерживает импорт и экспорт CSV-файлов, что позволяет быстро создавать каталоги.

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

Итак, для добавления карты на сайт ее сначала нужно создать. Сделать это можно, воспользовавшись конструктором сайт от сервиса Яндекс. Доступен этот сервис по следующему адресу — https://tech.yandex.ru/maps/tools/constructor/ .

Как видим, нам предлагают выбрать уже готовую карту либо же создать новую. Обратите внимание, для создания карты, впрочем, как и для работы с другими сервисами от Яндекс, вам необходима учетная запись на Яндксе. Если у вас ее нет или вы не авторизованы, тогда Яндекс предложит вам создать свою учетную запись или авторизоваться в уже имеющейся. Итак, нажимаем кнопку Создать новую карту и, скорее всего, вы увидите карту того города, в котором находитесь.

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

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

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

Для метки можно задать текст (описание), установить ее цвет и тип. После этого нажимаем кнопку Готово. После этого в левой части страницы найдем кнопку Сохранить карту и получить ссылку и нажмем ее.

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

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

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

У меня уже есть страница контактов на сайте WordPress, на эту страницу я и вставлю скопированный код. Обратите внимание, это код HTML, подключающий скрипт, поэтому данный код обязательно нужно вставлять на страницу не в визуальном режиме а в режиме Текст.

Сохраним страницу и посмотрим изменения в пользовательской части сайта WordPress. Как видим, Яндекс карта успешно появилась на сайте WordPress.

Все крайне просто и весь процесс занял буквально считанные минуты. Что очень удобно, так это то, что мы можем при желании Яндекс карту разместить на любой странице сайта WordPress и даже в любой части сайта. Например, мы вполне можем сформировать миниатюрную карту и вставить ее в сайдбар. Для этого достаточно использовать виджет Текст, который позволяет вставлять код HTML. Ну а у меня на этом все. Удачи!

данным компании 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-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.

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

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

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

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