Заменяем карты Google Maps на Яндекс.Карты в компоненте AdsManager для Joomla 1.5.

Автор: | 29.05.2011

В компоненте для создания доски объявлений AdsManager версии 2.5 существует плагин для отображения карты Google Maps, в этой заметке я расскажу как заменить Google Maps на Яндекс.Карты.

С начала необходимо скачать сам компонент (скачиваем версию pack_adsmanager2.5_Stable_unzipfirst.zip) или с моего сайта, разархивировать файл, установить сам компонент и модули к нему.

Затем на странице администрирования компонента Configuration перейти по ссылке Plugins и установить плагин gmaps, нужно просто указать файл с архивом плагина и нажать кнопку Upload File & Install.

После этого нужно создать новое поле (Field) с типом GMap Field.

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

После создания поля, проверьте правильность работы компонента и плагина.

Убедившись, что все работает как надо перейдем к модификации кода плагина.

Мы будем изменять файл plug.php, который находится по адресу <папка установки Joomla>/images/com_adsmanager/plugins/gmap/.

Открываем файл в любом текстовом редакторе и начинаем исправлять.

В файле plug.php нас будут интересовать две функции getDetailsDisplay и getFormDisplay.

Функция getDetailsDisplay отвечает за вывод карты в режиме просмотра объявления, а функция getFormDisplay — за вывод карты в форме добавления объявления, для указания конкретного места на карте.

Заменяем в начале код функции getDetailsDisplay от строки $google_key = $conf->google_key;// до return $return; на следующий:

$return = '<script src="http://api-maps.yandex.ru/1.1/index.xml?key='.$google_key.'" type="text/javascript"></script>'; 
$return .= '<script type="text/javascript">'; 
$return .= 'YMaps.jQuery(function () {'; 
$return .= 'var map = new YMaps.Map(YMaps.jQuery("#map_canvas.$fieldid.'")[0]);'; 
$return .= 'map.setCenter(new YMaps.GeoPoint('.$lat.', '.$lng.'), 15, YMaps.MapType.MAP);'; 
$return .= 'var point = new YMaps.GeoPoint('.$lat.', '.$lng.');'; 
$return .= 'var placemark = new YMaps.Placemark(point);'; 
$return .= 'map.addOverlay(placemark);'; 
$return .= 'map.addControl(new YMaps.TypeControl());'; 
$return .= 'map.addControl(new YMaps.ToolBar());'; 
$return .= 'map.addControl(new YMaps.Zoom());'; 
$return .= '});'; 
$return .= '</script>'; 
$return .= '<div id="map_canvas'.$fieldid.'" style="width: '.$map_width.'px; height: '.$map_height.'px"></div>';

А затем код функции getFormDisplay от строки

$google_key = $conf->google_key;//ABQIAAAAbgp4ITpmNUShfIO_dNHv_BR3Tz62YPXwBIaKJWeQ0jDUesttEhTdqyqafAWvPNs2HRK7lWBo2Yemww

до return $return; на следующий:

$return = '<script src="http://api-maps.yandex.ru/1.1/index.xml?key='.$google_key.'" type="text/javascript"></script>'; 
$return .= '<script type="text/javascript">'; 
$return .= 'var map = null;'; 
$return .= 'var geocoder = null;'; 
$return .= 'var marker = null;'; 
$return .= 'YMaps.jQuery(function () {'; 
$return .= 'map = new YMaps.Map(YMaps.jQuery("#map_canvas'.$fieldid.'"));'; 
$return .= 'map.setCenter(new  YMaps.GeoPoint('.$lat.', '.$lng.'), 15);'; 
$return .= 'var center = new YMaps.GeoPoint('.$lat.', '.$lng.');'; 
$return .= 'marker = new  YMaps.Placemark(center,{draggable: true, style:"default#pinkPoint"});'; 
$return .= 'map.addOverlay(marker);'; 
$return .= 'marker.setBalloonContent("<div>Нахожусь здесь</div>");'; 
$return .= 'map.addControl(new YMaps.TypeControl());'; 
$return .= 'map.addControl(new YMaps.ToolBar());';  
$return .= 'map.addControl(new YMaps.Zoom());'; 
$return .= 'YMaps.Events.observe(marker, marker.Events.DragStart, function (mEvent) { });'; 
$return .= 'YMaps.Events.observe(marker, marker.Events.DragEnd, function (mEvent) {'; 
$return .= 'var newGeoPoint  = mEvent.getGeoPoint();'; 
$return .= 'document.getElementById("gmap_lat'.$fieldid.'").value = newGeoPoint.getLng();'; 
$return .= 'document.getElementById("gmap_lng'.$fieldid.'").value = newGeoPoint.getLat();'; 
$return .= '});'; 
$return .= '});'; 
$return .= 'var map, geoResult;'; 
$return .= 'function showAddress (address) {'; 
$return .= 'map.removeAllOverlays();'; 
$return .= 'var geocoder = new YMaps.Geocoder(address, {results: 1, boundedBy: map.getBounds()});'; 
$return .= 'YMaps.Events.observe(geocoder, geocoder.Events.Load, function (mEvent) {'; 
$return .= 'if (this.length()) {'; 
$return .= 'var geoCoords = geocoder.get(0).getGeoPoint();'; 
$return .= 'geoPlacemark = new YMaps.Placemark(geoCoords,{draggable: true , style:"default#pinkPoint"});'; 
$return .= 'geoPlacemark.setBalloonContent("<div>Нахожусь здесь</div>");'; 
$return .= 'map.addOverlay(geoPlacemark);'; 
$return .= 'map.setCenter(geoCoords, 15);'; 
$return .= 'document.getElementById("gmap_lat'.$fieldid.'").value = geoCoords.getLng();'; 
$return .= 'document.getElementById("gmap_lng'.$fieldid.'").value = geoCoords.getLat();'; 
$return .= 'YMaps.Events.observe(geoPlacemark, geoPlacemark.Events.DragEnd, function (mEvent) {'; 
$return .= 'var newGeoPoint  = mEvent.getGeoPoint();'; 
$return .= 'document.getElementById("gmap_lat'.$fieldid.'").value = newGeoPoint.getLng();'; 
$return .= 'document.getElementById("gmap_lng'.$fieldid.'").value = newGeoPoint.getLat();'; 
$return .= '});'; 
$return .= 'map.addControl(new YMaps.TypeControl());'; 
$return .= 'map.addControl(new YMaps.ToolBar());'; 
$return .= 'map.addControl(new YMaps.Zoom());'; 
$return .= '}else {'; 
$return .= 'alert("Ничего не найдено");'; 
$return .= '}'; 
$return .= '});'; 
$return .= '}'; 
$return .= '</script>';
$return .= '<div>'; 
$return .= '<input type="text" size="60" name="gmap_address'.$fieldid.'" value="Введите адрес, чтобы найти на карте" />'; 
$return .= '<input type="button" value="Найти!" onClick="showAddress(adminForm.gmap_address'.$fieldid.'.value);" />'; 
$return .= '<div id="map_canvas'.$fieldid.'" style="width: '.$map_width.'px; height: '.$map_height.'px"></div>'; 
$return .= '<input type="hidden" id="gmap_lat'.$fieldid.'" name="gmap_lat'.$fieldid.'" value="'.$lat.'"/>'; 
$return .= '<input type="hidden" id="gmap_lng'.$fieldid.'" name="gmap_lng'.$fieldid.'" value="'.$lng.'"/>'; 
$return .= '<script type="text/javascript">initialize();</script>'; 
$return .= '<b>Если не нашли свой адрес, вы можете перетащить маркер в нужное место.</b>'; 
$return .= '</div>';

Сохраняем изменения.

Теперь нужно перейти в настройки параметров для поля с картой и поменять ключ для API Яндекс.Карт и координаты широты и долготы центра карты местами.

Посмотреть пример работы

Скачать архив с изменненым файлом plug.php

Через пару дней я опубликую новую заметку от том, как в этом же компоненте AdsManager для Joomla 1.5 можно использовать карты сервиса Kosmosnimki.ru.

С документацией по работе с API данного сервиса можно ознакомиться здесь

Заменяем карты Google Maps на Яндекс.Карты в компоненте AdsManager для Joomla 1.5.: 34 комментария

  1. Игорь

    Спасибо за плагин. Как можно ограничить область поиска в Вашей доработке?

  2. Сергей

    Друзья, подскажите.
    не могу установить плагин plug_ymap

    Пришет:
    Fatal error: Call to a member function setQuery() on a non-object in Z:homelocalhostwwwjoomimagescom_adsmanagerpluginsplug_ymapplug.php on line 299

    Это там где function install() начинается!

    ХЕЛП!

  3. Слава

    Доброго времени суток!
    Вопрос немного не в тему, но может тут, кто ни будь мне поможет?
    Возникла необходимость заменить в компоненте EZ Realty 6.0.5 для Joomla 1.5, GOOGLE MAP на YMAPS код нашел где находится поменял API ключь заменил сам код , yandex карта отображается, а вот функции не хотят работать ввод координат с админки метку поставить и т.д. не работают, я так думаю, что у яедекса свой фунционал, нужно прописать только не знаю что? внизу код исходник и мой вариант с яндексом, если кто то разбирается, прошу помочь буду благодарен $ ))) если кто разберется пишите в обратную связь админу сайт http://www.nedvizhimost2014.ru
    часть кода, исходник google map:
    <script src="http://maps.google.com/maps?file=api&v=2.x&key=er_mapapi;?>» type=»text/javascript»>

    //<![CDATA[

    function load () {
    var zoomlevel = ;
    var start_latitude = «er_declat;?>»;
    var start_longitude = «er_declong;?>»;
    var declat = «25.21239616785117»;
    var declong = «55.283203125»;
    var map = new GMap(document.getElementById(«map»));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl(true));

    var latitude = document.getElementById(‘er_declat’).value;
    if (latitude == «»)

    latitude = start_latitude;
    var longitude = document.getElementById(‘er_declong’).value;
    if (longitude == «»)

    longitude = start_longitude;
    if (latitude == 55.283203125) {
    zoomlevel = 4 }
    else {
    zoomlevel = }

    // center and zoom to the lat/long in the form
    map.centerAndZoom(new GPoint(longitude,latitude), zoomlevel);

    GEvent.addListener(map, «click», function(overlay, point){
    map.clearOverlays();
    if (point) {
    map.addOverlay(new GMarker(point));
    map.panTo(point);
    document.getElementById(‘er_declat’).value = point.y;
    document.getElementById(‘er_declong’).value = point.x;
    }
    }
    );
    }
    //]]>

    function submitbutton(pressbutton) {
    var form = document.adminForm;
    if (pressbutton == ‘cancel’) {
    submitform( pressbutton );
    return;
    } else {

    submitform( pressbutton );

    }
    }

    Мой вариант кода Yandex Map:

    <script src="http://api-maps.yandex.ru/1.1/?key=er_mapapi;?>» type=»text/javascript»>

    //

    function submitbutton(pressbutton) {
    var form = document.adminForm;
    if (pressbutton == ‘cancel’) {
    submitform( pressbutton );
    return;
    } else {

    submitform( pressbutton );

    }
    }

    сайт http://www.nedvizhimost2014.ru/index.php/component/option,com_contactmap/Itemid,12/id,1/view,contactmap/

    жду помощи))

  4. Евгений

    У меня почему то при показе опубликованного объявления появляется окно с областью для карты, но пустое. Не подскажите в чем может быть дело?

  5. Виталий

    Admin, ввиду актуальности и по личной просьбе прошу написать статью похожую на эту, но для другого компонента : «Заменяем карты Google Maps на Яндекс.Карты в компоненте EZ Realty — Realty Map для Joomla 1.5»

  6. Виктор

    Напишите пожалуйста как заменить карты Google Maps на Яндекс. Карты в компоненте ez realty. Либо напишите пожалуйста как настроить google карты, чтобы координаты сами искались, а то приходится вручную искать на карте.

  7. тим

    Добрый день! Все сделал как тут написано в результате при подаче объявления во первых пишеь не правильный ключ = а второе не выводит карту как таковую в объявлении.

    1. admin Автор записи

      Карту не выводит из-за неправильного ключа, проверяйте правильность ввода ключа в настройках компонента. Надо ключ получать для API Яндекс.Карт здесь

  8. Виктор

    Использовал ваш код, немного видоизменил, вот что получилось:

    <input type="text" id="address" style="width:500px;" value="» />


    <div id="map" style="width: px; height: px»>


    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=er_mapapi;?>» type=»text/javascript»>

    var map = null;
    var geocoder = null;
    var marker = null;
    var $lat = «55.354135»;
    var $lng = «40.297852»;
    var map, geoResult;
    function showAddress (adddrr) {
    map.removeAllOverlays();
    var geocoder = new YMaps.Geocoder(adddrr, {results: 1, boundedBy: map.getBounds()});
    YMaps.Events.observe(geocoder, geocoder.Events.Load, function (mEvent) {
    var geoCoords = geocoder.get(0).getGeoPoint();
    geoPlacemark = new YMaps.Placemark(geoCoords,{draggable: true , style:»default#pinkPoint»});
    geoPlacemark.setBalloonContent(«»);
    map.addOverlay(geoPlacemark);
    map.setCenter(geoCoords, 15);
    document.getElementById(«gmap_lat»).value = geoCoords.getLng();
    document.getElementById(«gmap_lng»).value = geoCoords.getLat();
    YMaps.Events.observe(geoPlacemark, geoPlacemark.Events.DragEnd, function (mEvent) {
    var newGeoPoint = mEvent.getGeoPoint();
    document.getElementById(«gmap_lat»).value = newGeoPoint.getLng();
    document.getElementById(«gmap_lng»).value = newGeoPoint.getLat();
    });
    map.addControl(new YMaps.TypeControl());
    map.addControl(new YMaps.ToolBar());
    map.addControl(new YMaps.Zoom());
    });
    }

    YMaps.jQuery(function () {
    map = new YMaps.Map(YMaps.jQuery(«#map»));
    map.setCenter(new YMaps.GeoPoint(‘.$lat.’, ‘.$lng.’), 15);
    var center = new YMaps.GeoPoint(‘.$lat.’, ‘.$lng.’);
    marker = new YMaps.Placemark(center,{draggable: true, style:»default#pinkPoint»});
    map.addOverlay(marker);
    marker.setBalloonContent(«Нахожусь здесь»);
    map.addControl(new YMaps.TypeControl());
    map.addControl(new YMaps.ToolBar());
    map.addControl(new YMaps.Zoom());
    YMaps.Events.observe(marker, marker.Events.DragStart, function (mEvent) { });
    YMaps.Events.observe(marker, marker.Events.DragEnd, function (mEvent) {
    var newGeoPoint = mEvent.getGeoPoint();
    document.getElementById(«gmap_lat»).value = newGeoPoint.getLng();
    document.getElementById(«gmap_lng»).value = newGeoPoint.getLat();
    });
    });


    Только, когда заходишь на страницу деталей, показывается карта, но начальная точка в другой стране, как сделать чтобы изначально показывался адрес объекта. Адрес объекта у меня выводит переменная $address. Заранее благодарю за ответ.

  9. Виктор

    Пытался этими переменными:
    var $lat = «55.354135»;
    var $lng = «40.297852»;
    задать начальную точку, хотябы в нашей стране, но не получается.

    1. admin Автор записи

      У Вас координаты заданы не в том порядке, var $lat = «55.354135″; var $lng = «40.297852″; — это Ашхабад, если поменять местами $lat = «40.297852″; var $lng = «55.354135″; — Спас-Клепики Рязанская область, Клепиковский район

  10. Виктор

    По поводу координат, пробовал менять, что-то точка не меняется.
    Если не трудно напишите что сделать, чтобы начальная точка сразу была результатом геокодирования полученного адреса? Посмотреть можно на любой странице деталей объявления, например http://1ekt.ru/index.php?option=com_ezrealty&controller=properties&task=detail&id=10&Itemid=41

    1. admin Автор записи

      У Вас в коде ошибки:
      — имена переменных $lat и $lng надо писать без $, т.к. это javascript.
      — тогда строчки

      map.setCenter(new YMaps.GeoPoint(‘.$lat.’, ‘.$lng.’), 15);

      var center = new YMaps.GeoPoint(‘.$lat.’, ‘.$lng.’);
      нужно переписать

      map.setCenter(new YMaps.GeoPoint(lat, lng), 15);
      var center = new YMaps.GeoPoint(lat, lng);

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

  11. Виктор

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

  12. Дмитрий

    Всем доброго. Помогите кто может, не могу выделить координаты после геокодирования, для последущей записи их в бд. Вот код:
    <?$company['address'] = 'Владивосток, 1-я поселковая 23';
    echo '

    var map = new YMaps.Map(YMaps.jQuery(«#YMapsID»)[0]);
    var geocoder = new YMaps.Geocoder(«‘ . $company[‘address’] . ‘», { prefLang : «ru», results: 1} );
    YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {
    var geoCoords = geocoder.get(0).getGeoPoint();
    var code = geoCoords.getLng();
    map.enableScrollZoom();
    map.addOverlay(geocoder.get(0));
    map.setBounds(geocoder.get(0).getBounds());
    Alert (code);
    });

    ‘;
    ?>

    Что делаю не так? карту отображает, а вот с координатами беда…

    1. admin Автор записи

      В переменной geoCoords уже содержаться координаты точки, т.е. строка var code = geoCoords.getLng(); — лишняя.
      Код будет иметь такой вид:

      $company['address'] = 'Владивосток, 1-я поселковая 23';
      echo '
       
       var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
      			var geocoder = new YMaps.Geocoder("' . $company['address'] . '", { prefLang : "ru", results: 1} );
      			YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {
      			var geoCoords = geocoder.get(0).getGeoPoint();
       
      			map.enableScrollZoom();
      			map.addOverlay(geocoder.get(0));
      			map.setBounds(geocoder.get(0).getBounds());
      			alert (geoCoords);
      			});
       
      ';
      ?>
  13. Виктор

    А мне поможете? так и не могу разобраться с изначальным геокодированием, мне нужно, чтобы изначально на карте отображался адрес искомого объекта, а не точек что я задал. Заранее благодарен.

  14. Александр

    Здравствуйте, подскажите неучу, каким образом в заголовок балуна можно вывести значение из базы данных MySQL?
    Заранее благодарю

  15. Baza

    admin помогите с EZ Realty
    почитав ветку понятно что есть вариант замены карты на яндекс карту только вот в каком файле это делать подскажите пожалуйста

    1. admin Автор записи

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

  16. denis

    Здравствуйте, подскажите почему не подключается народная карта? внес небольшие изменения в код, народная карта отображается при добавлении объявлений а так же в админке, но вот в опубликованном объявлении используется схема, у которой нету масштаба моего города до улиц и домов,
    я так понял что именно в этой части

    $return = '';

    $return .= '';
    $return .= 'function init () {';
    $return .= 'if ( YMaps.jQuery("#map_canvas'.$fieldid.'").is(":hidden") ){';
    $return .= 'YMaps.jQuery("#map_canvas'.$fieldid.'").show();';
    $return .= 'YMaps.jQuery("#viewmap").hide();}';

    $return .= 'map = new YMaps.Map(YMaps.jQuery("#map_canvas'.$fieldid.'")[0]);';
    $return .= 'map.setCenter(new YMaps.GeoPoint('.$lat.', '.$lng.'), 16, YMaps.MapType.PMAP);';
    $return .= 'var point = new YMaps.GeoPoint('.$lat.', '.$lng.');';

    $return .= 'map.setType(YMaps.MapType.PMAP);';
    $return .= 'map.addOverlay(placemark);';
    $return .= 'map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP]));';
    $return .= 'map.addControl(new YMaps.ToolBar());';
    $return .= 'map.addControl(new YMaps.Zoom());';
    $return .= 'var placemark = new YMaps.Placemark(point);';
    $return .= '};';
    $return .= '';
    $return .= '';
    $return .= '';
    return $return;

    1. admin Автор записи

      Нужно проверить подключен ли модуль Народных карт приподключении ключа для API &modules=pmap

      А также при задании центра карты map.setCenter(new YMaps.GeoPoint(37.64,55.76), 9, YMaps.MapType.PMAP);

      Тип карты map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]));

  17. denis

    Так и сделал, почему то код обрезался при вставке, еще раз публикую:

    class AdsManagerGmapPlugin {

    function getListDisplay($contentid,$field)
    {
    return AdsManagerGmapPlugin::getDetailsDisplay($contentid,$field);
    }

    function getDetailsDisplay($contentid,$field)
    {
    global $database;
    $query = "SELECT lat,lng FROM #__adsmanager_fieldgmap ".
    "WHERE fieldid = $field->fieldid AND contentid = $contentid";
    $fieldid = $field->fieldid;
    $database->setQuery($query);
    $database->loadObject($result );
    if ($result)
    {
    $lat = $result->lat;
    $lng = $result->lng;
    $database->setQuery("SELECT * FROM #__adsmanager_fieldgmap_conf WHERE fieldid = $field->fieldid");
    $database->loadObject($conf);
    $map_width = $conf->map_width;//500;
    $map_height= $conf->map_height;//300;
    $google_key = $conf->google_key;//

    $return = '';

    $return .= '';
    $return .= 'function init () {';
    $return .= 'if ( YMaps.jQuery("#map_canvas'.$fieldid.'").is(":hidden") ){';
    $return .= 'YMaps.jQuery("#map_canvas'.$fieldid.'").show();';
    $return .= 'YMaps.jQuery("#viewmap").hide();}';

    $return .= 'map = new YMaps.Map(YMaps.jQuery("#map_canvas'.$fieldid.'")[0]);';
    $return .= 'map.setCenter(new YMaps.GeoPoint('.$lat.', '.$lng.'), 16, YMaps.MapType.PMAP);';
    $return .= 'var point = new YMaps.GeoPoint('.$lat.', '.$lng.');';

    $return .= 'map.setType(YMaps.MapType.PMAP);';
    $return .= 'map.addOverlay(placemark);';
    $return .= 'map.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP]));';
    $return .= 'map.addControl(new YMaps.ToolBar());';
    $return .= 'map.addControl(new YMaps.Zoom());';
    $return .= 'var placemark = new YMaps.Placemark(point);';
    $return .= '};';
    $return .= '';
    $return .= '';
    $return .= '';
    return $return;
    }
    }

    Все так и делал и после ключа модуль подключил, и $return .= 'map.setCenter(new YMaps.GeoPoint('.$lat.', '.$lng.'), 16, YMaps.MapType.PMAP);'; , и вот так еще пробовал $return .= 'map.setType(YMaps.MapType.PMAP);';, не выходит.. в админке и при добавлении объявления получилось стало как надо, а вот при просмотре объявления нет народной карты и даже кнопки выбора типа не отображаются, хотя они подключены.

Добавить комментарий для Александр 43 Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *