На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.
Проблемы с картой при использовании CMS
Первоначально мы решили осветить работу с такими CMS, как Drupal, Wordpress, Joomla и систему Ucoz. В сумме они занимают более 80% рынка бесплатных CMS по данным компании iTrack. DataLife Engine решили не учитывать, т. к. полная версия этой CMS - платная.
Пожалуйста, учтите, что даже, проблемы у всех CMS схожие, поэтому даже если вашей CMS нет в списке, то прочитайте этот обзор полностью!
В качестве основной задачи, принятой в данном обзоре, является вставка Яндекс.Карты на страницу без использованием или с использованием дополнительных плагинов/модулей. JavaScript-код, показывающий карту, был получен из инструмента "Конструктор схем проезда".
На настоящий момент список расмотренных CMS следующий:
Drupal
Drupal — один из представителей CMS. Drupal может быть использован для построения самых разных типов сайтов. В базовой поставке возможности движка наиболее хорошо подходят для построения интернет-сообществ: новостных и форумных сайтов, персональных и коллективных блогов и подобных вещей, где основная задача — не потеряться в массе регулярно поступающих материалов, иметь возможность их структурировать и архивировать для легкого доступа в будущем. Функционал наращивается дополнительными модулями, которые можно доустанавливать по мере необходимости. (drupal.ru)
Используемая версия в обзоре: 6.16
Стандартный редактор
По умолчанию Drupal не снабжен визуальным редактором, редактирование контента осуществляется в обычных textarea.
Разрешенные теги контролируются с помощью фильтров. После установки доступна два фильтра:
- Filter HTML (по умолчанию).
- Full HTML.
В режиме Filter HTML тег <script> не допускается, поэтому при использовании данного режима JavaScript-код будет отображен в виде обычного текста. Поэтому для вставки кода, отображающей карту, подходит только режим Full HTML (либо можно написать свой фильтр, который будет допускать ввод javascript).
Интерфейс стандартного редактора
Результат
Карта, вставленная через стандартный редактор, отображается корректно. Однако html-комментарии (выделены красными прямоугольниками) не скрываются, а отображаются в опубликованной записи. Это баг самой CMS, поэтому перед вставкой кода их необходимо удалить вручную.
При открытии балуна можно увидеть конфликт ccs-стилей, который приводит к разъезжанию балуна.
Для устранения данного конфликта нужно в файле style.css (строка 193) убрать следующий стиль (или заменить на более частный):
table {
margin : 1em 0;
width : 100%;
}
Визуальные редакторы
Рассмотрим самые популярные визуальные редакторы, используемые вместе с Drupal:
TinyMCE
TinyMCE (англ. Tiny Moxiecode Content Editor) платформонезависимый Javascript HTML WYSIWYG редактор на основе Web. К основным характеристикам программы относятся поддержка тем/шаблонов, языковая поддержка и возможность подключения модулей (плагинов).
Модуль для Drupal: http://drupal.org/project/tinymce.
После установки модуля необходимо создать профиль для редактора, в котором можно задать некоторый набор параметров для TinyMCE. Для начала можно создать профиль со стандартными настройками.
Вставлять код нужно в режиме html (для этого в редакторе предусмотрена специальная кнопочка). TinyMCE вырезает атрибут src из тега <script> подключения API.
Исправить поведение редактора с помощью настроек CMS нельзя, однако можно задать дополнительные параметры при инициализации TinyMCE: convert_urls и remove_script_host.
Необходимо открыть файл modules\tinymce\tinymce\jscripts\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_scope || t, t.decode(url), 'src', 'script'));return '_mce_src="' + url + '"';}
Далее переименовать tiny_mce_src.js в tiny_mce.js.
BUEditor
BUEditor – это не WYSIWYG редактор, а лишь надстройка над стандартной textarea. BUEditor добавляет ряд кнопочек, которые упрощают вставку часто используемых тегов (например, img). Данный редактор был написано специально для Drupal.
Модуль для Drupal: http://drupal.org/project/bueditor.
Вставить javascript-код можно без ухищрений, результат будет такой же, как и в случае со стандартным редактором.
FCKEditor
FCKEditor (начиная с версии 3.0, редактор называется CKeditor) имеет такой же принцип действия, как и TinyMCE.
Модуль для Drupal: http://drupal.org/project/fckeditor.
Кнопки html у него нет, зато с помощью ссылки “Switch to plain text editor” (которая находится под редактором) можно переключиться на обычную textarea и ввести код. Никаких проблем не возникло.
Модули для работы с Яндекс.Картами
Модуль YandexMap (от bohart)
Данный модуль позволяет к любому типу контету добавлять карту с одной меткой
Ссылка: http://www.drupal.ru/node/26296 (доступны для скачивания версия 1.1.4 и 1.3)
Возможности модуля:
- Можно выбрать для каких материалов отображать карту.
- Смена типа, центра и масштаба карты. Тип карты и масштаб задается радиокнопками, а центр – в виде адреса.
- Можно задать размер карты в текстовых полях.
- Добавление нужных элементов управления с помощью флажков.
- Добавление одной метки на карте, названия и описания к ней.
- Можно добавить свою строку в копирайт.
- Поиск работает через раз (используется наш геокодер).
Интерфейс редактирования параметров модуля
Настройка элементов управления
Настройка карты
Интерфейс редактирования карты
Результат
WordPress
WordPress — CMS с открытым исходным кодом, распространяемая под GNU GPL. Написан на PHP, в качестве базы данных использует MySQL. Сфера применения — от блогов до достаточно сложных новостных ресурсов и даже интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты (википедия).
Используемая версия в обзоре: 2.9.2
CMS Word Press из коробки имеет свой визуальный редактор для текста с возможность переключения в режим редактирования HTML.
Стандартный редактор
WordPress "из коробки" имеет своей собственный редактор, который позволяет редактировать исходный код записи на вкладке HTML.
Вставляем в режиме html любой javascript-код (например, полученный из конструктора) и на выходе получаем вот такое:
YMaps.jQuery(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID-914")[0]
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()</p>
<p> 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 || "";</p>
<p> var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description}
object.description = description;</p>
<p> return object;
}
}
Вставленные теги вызывают синтаксическую ошибку javascript и карта отображаться не будет. Это происходит из-за того, что WordPress даже в режиме HTML делает автовставку переносов строк. Отключить такое поведение настройками в админ-панели нельзя
Вариантов два: либо записать весь код в одну строку (в этом случае дальнейшее редактирование кода будет затруднено), либо поправить тему для WordPress, добавив туда дополнительную настройку. Поэтому лучше выбрать второй вариант.
В используемой схеме в файл functions.php необходимо добавить следующую строчку:
remove_filter('the_content', 'wpautop');
Например, для дефолтной темы файлик нужно искать по следующему пути: wp-content\themes\default\functions.php.
Важно! Отключение автовставки переносов в теме CMS затронет все опубликованные записи, т. е. в тех записях, в которых данная функция использовалась, может измениться оформление.
Плагины для работы с Яндекс.Картами
Yandex Maps for Word Press v. 1.2.1 (from Mee)
Данный плагин позволяет добавить на карту одну метку с названием и описанием. Метка и карта позиционируются с помощью геокодирования (т. е. координаты указать нельзя - только адрес)
Ссылка: http://wordpress.org/extend/plugins/yandex-maps-for-wordpress/
После того, как в редакторе карты введена необходимая информация, нужно нажать на кнопку "Send Map to Editor" и код для карты появится в редакторе текста.
Редактор карты
Редактор текста с кодом карты
В результате будет отображена карта с открытым балуном
Плагин Яндекс.Карт для Word Press (from otrip)
Данный плагин может отображать либо карту с заданным центром и масштабом, либо YMapsML-файл. В RSS вместо интерактивной карты выводится статичная.
Ссылка: http://www.otrip.ru/2009/05/yandex-map-xml-for-wordpress/#more-879
Плагин ищет в редакторе текста строки вида [yamap: 37.61, 55.75, 6] или [yamap: URL]. В первом случае будет вставлена карта с заданным центром и масштабом, а во втором – отображен YMapsML, загруженный с адреса "URL".
Таким образом можно отображать и данные, экспортированные из сервиса "Мои карты":
[yamap: http://maps.yandex.ru/export/usermaps/3nXNKaog57QqpRlvteW0DJWI-CGmUzf6/]
Плагин имеет небольшую админку (которая находится в меню Параметры – Yandex Map (XML)), в которой можно указать API-ключ, начальный центр и масштаб карты, а также ее размеры.
Настройка плагина
Joomla
Joomla! (бывшая Mambo) – система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базу данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL. CMS Joomla! включает в себя различные инструменты для изготовления веб-сайта. Важной особенностью системы является минимальный набор инструментов при начальной установке, который дополняется по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге (википедия).
Используемая версия в обзоре: 1.5.17
Стандартный редактор
По умолчанию в Joomla в качетве стандартного редактора используется TinyMCE.
Если вставить код, то редактор удалит контейнер с картой, потому что он пустой. Это происходит из-за установленной опции clean для TinyMCE.
Для того, чтобы контейнер для карты не вырезался, в него нужно написать либо какой-то текст
<div id="YMapsID" style="width:450px;height:350px">map</div>
либо добавить внутрь контейнера комментарий
<div id="YMapsID" style="width:450px;height:350px"><!--карта--></div>
Плагины для работы с Яндекс.Картами
Компонент и плагин от yar-it.com
Компонент дает возможность создавать неограниченное количество карт и меток (для меток можно задавать разные значки).
Ссылка: http://yar-it.com/blog/yandexmap.html
Интерфейс редактирования карты
Интерфейс редактирования метки
Настройка внешнего вида метки
Искать центр карты или местоположение метки можно с помощью специального встроенного инструмента.
Инструмент для определения координат
Для отображении карты в тексте статьи, необходимо вставить специальный код. Например,
{yandexmaps view=map|id=1}
Эти коды отображаются в списке карт: http://YOUR_DOMAIN/administrator/index.php?option=com_yandexmaps&view=yandexmapsmaps
Список карт с кодами
Сам этот компонент не умеет отображать карты в статьях. Для обработки кодов, которые отдает компонент, необходим еще дополнительный плагин.
Ссылка: http://yar-it.com/component/option,com_yfiles/Itemid,95/task,view.download/cid,16/
Плагин вместо кода вставит ссылку, при щелчке на которой откроется модальное окно с картой:
SaaS платформа uCoz
uCoz – это SaaS платформа, включающая в себя хостинг и систему управления сайтом. uCoz работает по принципам Web 2.0 и позволяет создавать сложнейшие проекты с необычайной простотой и скоростью (ucoz.ru).
Вставить JavaScript легко во строенном редакторе, никаких проблем не наблюдается. Главное включить html-теги и отключить вставку автопереносов.
Решение проблем с версткой
С помощью css-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.
Мы рекомендуем при обнаружении конфликта стилей заменять более общие стили (например, которые заданы для всех таблиц), более частными (для таблицы с определенным классом или идентификатором).
Например, этот стиль приведет к растягивнию балуна:
table { width : 100% }
Его лучше заменить, например, на такой:
table.myTable { width : 100% }
Полный список конфликтов и их причин приведен на отдельной странице
http://rodlex.narod2.ru/css-problems.html
