Рассмотрим варианты интеграции, внедрения Яндекс-карт в материалы Joomla.
Вариантов на мой взгляд всего 2:
1. Использование сторонних компонентов.
2. Вставка напрямую в исходный текст страницы в админке Joomla.
1. На данный момент в нете находится один компонент + плагин под названием YandexMaps.
На проверку это модификация компонента (и плагина) Phoca Maps, который заточен под карты Гугла.
- Создать карты со всеми визуальными настройками;
- Создать метки на этих картах, также со всеми настройками;
- C помощью плагина вывести карты на нужных страницах.
Разработчики из Ярославля славно потрудились производя на свет эту модификацию, однако и сырые (не особо критичные места встречаются).
Например гугловые картинки меток и гугловые методы в коде.
Наверное такой компонент имеет смысл использовать при значительном количестве карт на сайте.
Поэтому я его не тестировал, да и ключ к API Яндекс карт привязывать к локалхосту не хотелось.
2. Вставка напрямую обильно описана на http://api.yandex.ru/maps/, и для вставки пары-тройки карт она вполне подходит.
Примеров добавления на страницу одной яндекс карты достаточно много по вышеуказанному адресу, а вот примеров добавления нескольких карт я не нашел.
Несколько Яндекс карт на одной странице
- Для того чтобы показать несколько карт необходимо создать несколько объектов YMaps с помощью функции-конструктора Map(document.getElementById(«YMapsID»)) в которую параметром мы передаем контейнер для карты.
- Имеет смысл загружать карты по запросу, соответсвенно будем использовать функцию инициализирующую карту (initMap).
- Переменные типа координат и подписей меток будем передавать в initMap параметрами.
- Для запуска initMap воспользуемся методом YMaps.load(init). Идем таким путем так как сама функция init без параметров, что выяснилось опытным путем.
- Добавим переключатель показывания карты для экономии места.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Несколько Яндекс.Карт на одной странице</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?loadByRequire=1&key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script>
<script type="text/javascript">
function initMap(divId,x,y,name,desc) {
var m = new YMaps.Map(document.getElementById(divId));
m.setCenter(new YMaps.GeoPoint(x,y), 16);
m.addControl(new YMaps.TypeControl());
m.addControl(new YMaps.ToolBar());
m.addControl(new YMaps.Zoom());
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(x,y));
placemark.name = name;
placemark.description = desc;
m.addOverlay(placemark);
return m;
}
function init1()
{
initMap('YMapsID1',37.609218,55.753559,'Россия','Москва');
}
function init2()
{
initMap('YMapsID2',30.313497,59.938531,'Россия','Санкт-Петербург');
}
function toggle(x,init) {
if (document.getElementById(x).style.display == 'none') {
document.getElementById(x).style.display = ''; YMaps.load(init);}
else {document.getElementById(x).style.display = 'none';}}
</script>
</head>
<body>
<span style="border-bottom-width:1px;border-bottom-style:dashed;cursor:pointer;" onclick="toggle('YMapsID1',init1);">Россия, Москва</span>
<div id="YMapsID1" style="width:480px;height:320px;margin:8px 0px;display:none;"></div>
<span style="border-bottom-width:1px;border-bottom-style:dashed;cursor:pointer;" onclick="toggle('YMapsID2',init2);">Россия, Санкт-Петербург</span>
<div id="YMapsID2" style="width:480px;height:320px;margin:8px 0px;display:none;"></div>
</body>
</html> |
Примечание: для того чтобы в Joomla добавить на страницу html-код или код JavaScript необходимо отключить визуальный редактор.
