Клуб API Карт

Создание карты с метками представительств на joomla

carrrotslings
19 июля 2010, 13:35

Нужно отобразить на карте флажки представительств (больше 50).

Полеза в документацию, разобралась, насколько хватило разумения... Из готовых примеров слепила :)

 

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=AA-YOEwBAAAAelGNBgIAEAPZf_7qBPvTEPhmeN26HpvvxsYAAAAAAAAAAACD3Ro7PM2UZq5zzFCz9GkqSUz9-A==" type="text/javascript"></script>  <script type="text/javascript">
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),
                gorod = {
        'Россия' : new YMaps.GeoPoint(67.119649,49.365056),
        'Ростов-на-Дону' : new YMaps.GeoPoint(39.693849,47.261176),
        'Москва' : new YMaps.GeoPoint(37.609218,55.753559),
        'Санкт-Петербург' : new YMaps.GeoPoint(30.313497,59.938531),
// Остальные города опустила...
    };

map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());

// Устанавливает центр карты на России
map.setCenter(gorod['Россия'], 2);

//---------------------------------------------------
// Создает стиль
var s = new YMaps.Style();

// Создает стиль значка метки
s.iconStyle = new YMaps.IconStyle();

s.iconStyle.href = "/templates/youtravel/favicon.ico";
s.iconStyle.size = new YMaps.Point(25, 20);
s.iconStyle.offset = new YMaps.Point(0,-20);

s.iconStyle.shadow = new YMaps.IconShadowStyle();
s.iconStyle.shadow.href = "/templates/youtravel/favi.ico";
s.iconStyle.shadow.size = new YMaps.Point(25, 20);
s.iconStyle.shadow.offset = new YMaps.Point(0, -20);

// Делаем метки!!!!

// Ростов---------
var rostov = new YMaps.Placemark(gorod['Ростов-на-Дону'],{style: s});

// Устанавливает содержимое балуна
rostov.name = '<center><a href="http://carrrot.ru/index.php?option=com_contact&view=contact&id=2">Ростов-на-Дону<br /></a>';
rostov.description = '<a href="http://carrrot.ru/index.php?option=com_contact&view=contact&id=2"><img src="http://carrrot.ru/images/stories/rostov.jpg" width="150"><br />Александра Приданникова</a>';

// Добавляет метку на карту
map.addOverlay(rostov);

YMaps.Events.observe(rostov,  rostov.Events.MouseEnter, function(rostov){rostov.openBalloon()});


// Москва---------
var moscow = new YMaps.Placemark(gorod['Москва'],{style: s});

// Устанавливает содержимое балуна
moscow.name = '<center><a href="http://carrrot.ru/index.php?option=com_contact&view=contact&id=10&Itemid=54">Москва</a>';
moscow.description = '<a href="http://carrrot.ru/index.php?option=com_contact&view=contact&id=10&Itemid=54"><br><img src="http://carrrot.ru/images/stories/214707-a2920-24445319-m549x500.jpg" width="150"><br>Екатерина Скачедуб</a>';

map.addOverlay(moscow);

YMaps.Events.observe(moscow,  moscow.Events.MouseEnter, function(moscow){moscow.openBalloon()});

// питер ---------
var piter = new YMaps.Placemark(gorod['Санкт-Петербург'],{style: s});

piter.name = '<center><a href="http://carrrot.ru/index.php?option=com_contact&view=contact&id=35">Санкт-Петербург</a>';
piter.description = '<a href="http://carrrot.ru/index.php?option=com_contact&view=contact&id=35"><br><img src="jpg" width="150"><br>Ирина Прокофьева </a>';

map.addOverlay(piter);

YMaps.Events.observe(piter,  piter.Events.MouseEnter, function(piter){piter.openBalloon()});

// И дальше по такой же схеме... Остальные города опустила...

//-------------------- Вывод списка городов под картой - из примера Яндекса

            // Ссылка на контейнер для меню
            var menuContainer = YMaps.jQuery('#mapMenu');

            // Генерирование меню
            for (var item in gorod) {
                // Используем замыкание, чтобы работать с конкретным свойством объекта
                (function (title, geoPoint) {
                    // Создаем ссылку, обернутую в тег <p> для более приятного визуального восприятия
                    YMaps.jQuery("<li><a href=\"#\">" + item + "</a></li>")
                        .find('a')
                            // Создаем обработчик по щелчку на ссылке
                            .bind('click', function () {
                               
                                // Подчеркиваем все ссылки
                                menuContainer.find('a').css('text-decoration', 'underline');
                               
                                // Кроме той, на которую щелкнули
                                YMaps.jQuery(this).css('text-decoration', 'none');
                               
                                // Перемещаем карту
                                map.panTo(geoPoint, {flying: 1});
                                return false;
                            })
                            .end()
                       
                        // Записываем элемент списка в список
                        .appendTo(menuContainer);
                })(item, gorod[item])
            }
        });
    </script>


<div id="YMapsID" style="width: 590px; height: 400px;">&nbsp;</div>
<ul id="mapMenu"></ul>

 

Первая проблема - не получилось загрузить скрипт в тег <head>, потому что в CMS можно вставить только в <body>... Поэтому все вставила в <body>.

Когда список был из 5-10 городов получалось. А сейчас отображаются не все метки... Возможно потому, что карта не успевает загрузиться...

Второе - под картой не выводится список городов...

Вобщем, и в javascirpt'e я совсем не шарю, чтобы все осмыслить и осознанно написать. Но уже сколько раз просматривала - все должно работать...

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

16 комментариев
Подписаться на комментарии к посту

не получилось загрузить скрипт в тег , потому что в CMS можно вставить только в


Cвой код в отдельный файл и загружать в любое место через шаблон.
Просто посмотрите templates/ваш шаблон/index.php


т.о. свой скрипт например в test.js и в шаблоне спокойно в head кладете


Спасибо, добрый человек))) Щас попробую.

Можно тогда еще вопросик?
Я вот догадывалась, что можно положить в шаблон, только не знала куда :)
Но ведь, если скрипт присобачить к шаблону, то он будет открываться постоянно?
Хотя, опять же, в документации есть пример, чтобы скрипт активизировался пользователем... Или это не то.
Короче, есть ли способ, чтобы скрипт срабатывал только при открытии определенной страницы?
Можно загружать API по требованию, но небольшой (~20 Кб) загрузчик все равно будет грузиться на всех страницах.

Теоретически, никаких проблем с загрузкой API из быть не должно. Никаких ошибок в консоль не пишется? (в FF Инструменты -> Консоль ошибок)
В самом начале документации по Мэпс сказано, что карта должна быть загружена до того, как загрузится страница. Поэтому я предполагала, что скрипт не успевает сработать до полной загрузки...
Имеется в виду, что создание карты необходимо выполнять после готовности DOM. В Вашем случае это требование выполнено (YMaps.jQuery(function(){ ... - это и есть навешивание обработчика на событие готовности страницы), поэтому проблема где-то в другом месте.
для Joomla 1.5, если вы запускаете карту например в статье, можно предложить следующую проверку:


$id = JRequest::getVar( 'id');

if ($id  == id вашей статьи) 
{ ?>
//Здесь помещаем код, который загружается только в этой статье


Ну а в целом, поищите на профильных ресурсах использование JRequest.
для загрузки большого числа объектов, видимо лучше воспользоваться YMapsML
И еще раз спасибо)
Попытаюсь доделать по-старому, если уж не получится - придется вникать...
К сожалению без кода страницы, можно только предпологать причину. Напишите пожалуйста письмо на адрес support@api-maps.yandex.ru, а к письму приложите html демонстрирующий проблему. Постараемся разобраться и помочь.
Есть компонент:

Компонент - конструктор Яндекс карт (yandex map)
Имеет широкий  спектр настроек:


  • Возможность создания неограниченного количества карт и меток.
  • Подключение элементов управления
  • YandexBar
  • Мини навигация
  • Поиск по адресу
  • Поиск по меткам с обратным геокодированием


Также есть функция поиска по адресу и обратное геокодирование


 


Тут можно его скачать:


 
http://yar-it.com/download/
ira.tchistiackova
28 июля 2010, 11:08

А у меня не получилось и в body )) вставить скрипт, даже при настройке Joomla NoEditor когда в статью вставляю




при сохранении Jommla практически все убирает (оставляет лишь window.onload = function ()  ).


Еще не совсем понятно, как написать корректно код в отдельном файле js ?


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


 

Решение некоторых проблем при использовании CMS Joomla описаны на следующей странице:
http://clubs.ya.ru/mapsapi/replies.xml?item_no=10235#cms-joomla

Вынести javascript в отдельный файл несложно. Создайте файл, например, map.js и вынесите в него код между тегами . После подключения скрипта API подключите его:



/js/map.js подразумевает, что в корне вашего сайта есть папка js, а в ней есть файл map.js

Если что-то не будет получаться - спрашивайте.
ira.tchistiackova
28 июля 2010, 17:15
Так все и сделано сегодня, и не работает (( вот текст файла yamap.js

window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
}

вот в head (шаблоне joomla) прописано




сам yamap.js лежит там, где нужно

в тексте статьи стоит див

и не работает ((

вот ссылка

http://unniservice.ru/contacts.html
В файле http://unniservice.ru/templates/joom_simplicity/js/fontresizer.js переопределяется обработчик window.onload:

window.onload = setUserOptions;

Могу предложить заменить содержимое файла ymap.js с использованием jQuery:

YMaps.jQuery(function () {
    var map = new YMaps.Map(document.getElementById("YMapsID"));
    map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
});

Или с использованием mootools:

window.addEvent("domready",function(){
    var map = new YMaps.Map(document.getElementById("YMapsID"));
    map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
});
ira.tchistiackova
28 июля 2010, 18:21
Заработало с использованием mootools! Вам ОГРОМНОЕ спасибо, вы - добрый друг и отличный специалист!
Кстати, чуть не забыла отписаться!

Все получилось благодаря помощи gregof и Купер! Спасибо, ребята!

Результать вот тут - http://carrrot.ru/index.php?option=com_content&view=article&id=44&Itemid=42

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