Главная Климат

Пять лучших плагинов WordPress для отображения карт Google. Плагин Google и Яндекс карта WordPress

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

У Яндекса в этом плане дела выглядят поскромнее. Плагинов существует совсем мало. Впрочем, это не столько проблема Яндекса, сколько разработчиков плагинов. Отечественных, понятное дело.

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

Добавление Яндекс карты для WordPress

Для чего может понадобится интерактивная карта на вашем сайте, я думаю и так всем понятно. Конечно, в первую очередь это различные схемы проезда и прохода. И Гугл и Яндекс уже давно позволяют своим пользователям использовать специальные конструкторы создания карт. Найти такой конструктор для Яндекс карты можно вот . Создавать карту следует под своим аккаунтом для того, что иметь потом возможность её отредактировать.

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

После того как вы справились с рисованием, не забудьте ввести название своей карты. Потом жмакаем на большую желтую кнопку — «Сохранить и получить код». Внизу, в строке появится код который вам нужно скопировать в буфер обмена (CTRL+C) и потом вставить(CTRL+V) на нужную страницу или пост вашего сайта. Только учтите, что перед тем как вставить код, следует переключить визуальный редактор сайта в текстовый режим. Тут же, после вставки, в тексте кода можете подправить размер окна с картами если требуется.

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

Плагины добавления Яндекс карт

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

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

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

Единственный премиум плагин который мне удалось сыскать на тему карт от Яндекса. Плагин будут полезен всем кому надо создавать карты с многочисленными метками и описаниями к ним. Умеет делать:

Выбор элементов управления
Задавать размеры карты
Задавать тип карты
Добавлять любое число меток
Показывать текст на иконке и в подсказке
Выводить ссылки

Что именно использовать на своем сайте — Яндекс или Гугл карты пусть каждый решает сам. На мой субъективный взгляд, Гугл карты хороши для сложной работы ввиду того, что к ним есть масса специализированных программ и плагинов для WordPress. Ну а для быстрого вывода например, схемы проезда в отечественных городах отлично сгодится и Яндекс.

Сегодня в блоге гостевой пост про 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 лет я активно занимаюсь блоггингом, и в достигла достаточно высоких навыков. Тематика моих блогов в основном это дизайны веб сайтов, грамотное программирование и множество различных блогов-помощников для начинающих веб программистов.

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

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

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

1. WP Google Maps

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

Для создания карты выберите “Карты”, а затем “Моя первая карта”. К сожалению, в бесплатной версии вам доступна будет только одна карта, поэтому добавлять новые страницы не имеет смысла.

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

В общих настройках вы сможете задавать высоту, ширину, отзывчивость, масштаб карты, её тип (обычная, спутниковая, физическая или смешанная), а также задать выравнивание. Вы сможете создавать неограниченное количество многоугольников и полилиний. Недостатком является то, что единственной иконкой, которую вы сможете использовать, является стандартный значок Google.

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

Когда вы закончите настройку карты, вставьте прилагаемый шорткод в запись или на страницу – вот и всё, что вам нужно.

Используя настройки плагина, вы сможете управлять как из админки, так и из пользовательской части сайта интерфейсными элементами, такими, как использование API карт Google, использование jQuery для устранения неисправностей, уровнем аккаунта, WordPress. Маркерные данные также могут быть импортированы из вашей базы данных или в файле XML.

Как уже говорилось, самым большим недостатком данного плагина является то, что в бесплатной версии вы сможете создать только одну карту (премиум версия обойдётся вам в $19.99). Помимо этого, премиум версия содержит ещё массу привлекательных возможностей.

Достоинства:

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

Недостатки:

бесплатная версия ограничена одной картой.

2. Google Maps Bank

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

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

Шаг 1. Вам необходимо выбрать заголовок, описание и тип карты (доступны те же четыре варианта). Шаг 2. В информации о местоположении вы указываете точные географические координаты. Шаги 3-5 позволяют вставлять маркеры и полигоны/полилинии.

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

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

Google Maps Bank – очень хороший плагин, но он имеет несколько недостатков. Наиболее значимым является тот, что Lite версия ограничена 2 картами, 5 маркерами, 1 полигоом и 1 полилинией. Так что, если вам нужно что-то более существенное, чем просто добавить пару карт в ваш контакт или на страницу, то вам придётся либо выполнить апгрэйд (цены начинаются от £17), либо поискать в другом месте.

Достоинства:

много пользовательских настроек
очень удобный, хорошо организованный пользовательский интерфейс
маркеры (максимум 5) с настраиваемыми значками
полигоны (максимум 1)
полилинии (максимум 1)
пользовательская настройка интерфейса
карты четырёх типов: обычная, физическая, смешанная, спутниковая
поддержка нескольких языков.

Недостатки:

Lite версия ограничена двумя картами.

3. Simple Google Maps Short Code

Simple Google Maps Short Code – крайне простой плагин, лишённый всяческих наворотов, в котором отсутствует страница настроек. Имеется только шорткод, который можно вставить в пост или на страницу.

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

Достоинства:

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

Недостатки:

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

4. CP Google Maps

CP Google Maps – мощный плагин, имеющий множество функций, хотя его интерфейс несколько сложноват.

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

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

Когда вы закончите редактирование (не забудьте добавить заголовок и описание), прокрутите страницу вниз до конца виджета и нажмите на кнопку “Вставить тег карты”, чтобы вставить шорткод карты в свой текстовый редактор.

Чтобы настроить опции плагина, перейдите в меню Настройки >> CodePeople карта. Здесь вы сможете настроить масштаб, ширину карты, выравнивание, тип (обычная, спутниковая, физическая и смешанная), язык и несколько других параметров.

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

Достоинства:

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

Недостатки:

не очень удобная навигация
настройки не могут быть индивидуальными для каждой карты.

5. Intergeo Maps

Intergeo Maps – отличный бесплатный плагин от компании CodeinWP. Он имеет множество полезных функций и практически полное отсутствие недостатков.

Во-первых, процесс создания карт довольно сильно отличается от подобного процесса в других описанных плагинах. После установки плагина в боковом меню вы увидите новую вкладку “Медиа”. Для создания карты вам сначала нужно будет перейти в Медиа >> Страница Intergeo, а потом кликнуть кнопку “Добавить новую”.

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

Вы можете добавлять на карту маршруты – транспортный, велосипедный, погоду и/или панорамные фотографии.

Когда вы закончите настройку всех этих параметров, кликните на кнопку “Перейти по адресу”.

Снова появится всплывающее окно, в которое вы сможете ввести адресную информацию для карты. После этого кликните кнопку “Создать карту”.

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

Вы можете также создавать карту из вашего редактора записей, единственная разница заключается в том, что нужно будет кликнуть на кнопку “Добавить медиа”, расположенную вверху редактора. Наконец, вы всегда сможете неограниченно пополнять ваши библиотеки карт через Медиа >> Страница Intergeo.

Достоинства:

множество настроек
простой пользовательский интерфейс и простой процесс создания карты
неограниченное количество карт
маркеры (пользовательские иконки входит в комплект)
полигоны
полилинии
круги
8 стилей дизайна карты
спутниковая/обычная/физическая карта

Недостатки:

недостатков не обнаружено!

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

Какой из описанных плагинов вы считаете лучшим? Напишите об этом в комментариях.

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

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

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

Вставить Яндекс карту на сайт под управлением WordPress достаточно просто. Можно либо сразу воспользоваться Yandex API, чтобы создать ее и получить код для размещения, либо установить специальный плагин, который с помощью этого же API сделает все за вас.

Размещение через Yandex APIВывод

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