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

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

На данный момент самые популярные геоинформационные сервисы - это по-прежнему карты 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 и вывести их на карту.

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

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

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

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

Результат

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

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 следующий:

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

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

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

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

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

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

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

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

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

Необходимо открыть файл 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

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;
}
}

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

remove_filter("the_content", "wpautop");

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

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

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

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

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

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

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

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

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

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

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

map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Необходимо открыть файл 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

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;
}
}

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

remove_filter("the_content", "wpautop");

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

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

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

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

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

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

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

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

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

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

map

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

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

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

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

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

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

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

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

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

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

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

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

","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 следующий:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Return object;
}
}

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

remove_filter("the_content", "wpautop");

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

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

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

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

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

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

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

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

map

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

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

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

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

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

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

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

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

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

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

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

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

","html":"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Return object;
}
}

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

remove_filter("the_content", "wpautop");

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

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

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

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

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

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

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

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

map

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

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

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

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

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

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

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

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

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

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

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

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

","html":"

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

","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 следующий:

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

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

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

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

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

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

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

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

Необходимо открыть файл 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

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

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

Return object;
}
}

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

remove_filter("the_content", "wpautop");

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

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

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

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

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

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

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

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

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

map

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

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

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

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

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

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

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

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

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

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

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

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

Вы ищете способ добавить Google Maps на свой сайт WordPress? Существует огромное количество бесплатных плагинов для Google Maps, что затрудняет выбор лучшего из них. В сегодняшней статье мы покажем вам 7 лучших бесплатных плагинов Google Maps для WordPress.

Добавляем Google Map в WordPress

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

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

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

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

1. MapPress Easy Google Maps

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

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

2. Google Maps Builder

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

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

3. WP Google Maps

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

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

4. WP Google Map Plugin

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

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

5. Google Maps Widget

Хотите быстро вывести карту в виджете сайдбара? Google Maps Widget позвоилт вам легко добавить Google Maps в свой садбар или любую другую область виджетов. Клик по карте откроет ее во всплывающем lightbox-окне в увеличенном виде. Также можно указать цвета меток или даже использовать свои изображения.

6. Basic Google Maps Placemarks

Хотите добавить карту Google на свой сайт со своими собственными метками? Basic Google Maps Placemarks позволит вам добавлять метки с адресом, назначать им категории, добавлять произвольные маркеры при необходимости.

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

7. CP Google Maps

Сегодня в блоге гостевой пост про WP плагины Google Maps от Марии Филатковой. Кстати, чуть позже я рассмотрел через произвольные поля — так тоже можно.

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

Пятерку наилучших Google карт-плагинов открывает хорошо всем известный плагин от компании Huge-IT, Google Maps . Эта карта сразу привлекает к себе внимание большим количеством позитивных , которые на самом деле доказывают, что модуль один из наилучших. Естественно, не только опираясь на эти отзывы, можно так сказать.

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

Собственная иконка на маркере.
Дополнительная ссылка на полигоны.
Окружные выделения на карте.
Легкость управления и пользования.
Поддержка просмотра улиц.
Коррекция карты по ширине, степени приближения и т.д.

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

Написан чистым javascript-ом, никакого jQuery и очень хорошо совмещается с мобильными устройствами и другими гаджетами, благодаря высокой подвижности и совместимости с маленькими размерами экранов.

Список наиболее ярких функций:

Отрегулирование высоты и ширины карты.
Высокая адаптивность.
Автоматическая централизация карты в зависимости от размера экрана.
Отрегулирование цвета границ.
Вкл/выкл контролеров на карте.

3. Google Maps Bank

Следующий в списке Google Maps Bank . Этот плагин сравнительно легок в использовании. Пошаговые настройки всегда легко осваиваются даже самому неопытному пользователю. И буквально за несколько минут я создала замечательную карту для моего сайта. Модуль оснащен возможностями детального преобразования карты. Функциональность основана на ajax-е и здорово то, что Google Maps Bank можно использовать в случаи многоязычных сайтов.

Список основных особенностей:

Создание карт с помощью 7-Шаговой инструкции.
Удобный пользовательский интерфейс, основанный на функциональность ajax.
Супер прост в использовании.
Многоязычный плагин.

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

Возможности плагина:

Легкий JQuery (расширение FancyBox).
Карта Google в всплывающем окне.
Приспособлен к работе на мобильных устройствах.
Легко управляемый бэкэнд.
Поддержка локализации.

На последнем месте от TechGasp. Мне понравился этот продукт из-за хорошей мобильной адаптивности, широкие возможности внутреннего интерфейса для настройки отображения карты, я также смогла разместить свой логотип на карту. Но причина, по которой он на последнем месте моего списка та, что плагин имел некоторые ограничения, такие как возможность добавления всего 12 маркеров на карте. В остальном, с точки зрения качества отображения и его возможностей, модуль может привлечь внимание.

Возможности:

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

В заключении, хочу добавить, что, будучи достаточно опытными в использовании плагинов и работы с WordPress, я с полной уверенностью рекомендую вышеперечисленные плагины Google карт . Исходя из тематики вашего сайта и ваших личных предпочтений, каждый из них может быть полезен для вас. Так что смело пробуйте и оставляйте отзывы.

Информация об авторе. Я Мария Филаткова, 26 лет. Моя основная деятельность -создание различных вебсайтов для себя и своих заказчиков. Помимо этого, уже в течении 3 лет я активно занимаюсь блоггингом, и в достигла достаточно высоких навыков. Тематика моих блогов в основном это дизайны веб сайтов, грамотное программирование и множество различных блогов-помощников для начинающих веб программистов.

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

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

Итак. Перед Вами 15 лучших Google Map плагинов для Wordpress для указания Вашего местоположения на картах Google.

WP Google MapsНаиболее легкий в использовании плагин. Позволяет быстро и легко добавить карту Google в пост и/или на страницу Вашего блога . Никаких iFrames, или «магических заклинаний»! Идеально подходит для странички Контакты, отображения маршрутов движения , области обслуживания и т.п. Даже бесплатная версия позволяет добавлять произвольное количество маркеров, а уж возможности Pro-версии просто безграничны!

Google Maps BankWP Google Maps Bank самый простой и в то же время самый мощный плагин подобного рода из когда-либо созданных для Wordpress. Его Lite-версия позволяет создавать 2 карты, 5 маркеров, 1 полилинию и 1 полигон. Есть возможность вывести панораму Google Street View . Для добавления на страницу используется простой код.

Advanced Google Maps PluginЭто, пожалуй, самый «навороченный» плагин. Он позволяет создавать неограниченное количество отдельных зон на локациях и назначать каждой зоне дополнительную информацию (номера телефонов, факсов, email и т.п.). Возможен импорт данных из csv, exel, json и xml.
Стоимость плагина: 28$

Google Maps Travel RouteGoogle Maps Travel Route идеально подходит для отображения карт с маршрутами движения или путешествий. Добавление, удаление и редактирование локаций производится в панели управления. Позволяет добавить карту как на страницу, так и в пост, а также в боковую панель.

Responsive Google MapsA responsive Google map позволяет не только добавлять множество маркеров на одной карте, но и создавать несколько карт на одной странице. Имеет полноэкранный режим и возможность объединять маркеры в кластеры. Легок в установке. Генерирует простой и понятный код для вставки. Создали карту, добавили локацию, скопировали сгенерированный код на страницу и - вуа-ля!
Стоимость: 17$

Basic Google Maps PlacemarksBGMP создает отдельные посты для маркеров. Вставка на страницу также осуществляется при помощи шорткода. Имеются дополнительные опции, отвечающие за отображение карты на странице. Маркерам можно назначать различные , при клике на которых во всплывающем окне отображается заголовок маркера и его описание.

WiLD Google MapsWiLD Googlemap - плагин, который позволяет задавать различные типы карт и их размер. Позволяет создавать несколько карт на странице и неограниченное количество маркеров на каждой из них. Просто посмотрите пример и вы оцените его широкие возможности.
Стоимость: 17$

Ultimate Google MapsПлагин Ultimate Google Maps от Inceptive Design Labs позволяет легко управлять созданием и размещением карт Google на Вашей странице. Поддерживает различные типы карт, задание траекторий и маркеров.
Стоимость: 19$

Leaflet Maps MarkerВ дополнение к стандартным для подобных плагинов функциям плагин Leaflet Maps Marker поддерживает группировку маркеров на различных слоях и различные типы карт. Leaflet Maps Marker-это Ваша персональная Geo-CMS с высоким уровнем защиты.

Google Maps GeneratorИзюминка этого плагина-визуальное создание карт без единой строчки кода. Включает семь различных скинов, придающих Вашей карте уникальный внешний вид и позволяет настраивать цветовую гамму (стилизировать) Вашей карты.
Стоимость: 19$

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