Яндекс карты в Joomla

JavaScript | 13.12.2009 | Метки:

Логотип API Яндекс.КартыРассмотрим варианты интеграции, внедрения Яндекс-карт в материалы 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="YMapsID1" style="width:480px;height:320px;margin:8px 0px;display:none;"></div>
</body>
</html>

Примечание: для того чтобы в Joomla добавить на страницу html-код или код JavaScript необходимо отключить визуальный редактор.


Добавление комментария:

Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">