API Яндекс.Карт и Joomla

Автор: | 21.10.2012
Нет комментариев

Существуют различные готовые решения для использования API Яндекс.Карт в CMS Joomla, их Вы можете успешно использовать.

Но иногда нужно просто встроить какую-либо карту в статью Joomla не используя сложных расширений.

В этой заметке я расскажу об одном из решений данной проблемы.

Нам нужно загрузить плагин Sourcerer, его можно использовать c версиями Joomla 1.5 и 2.5, на сервере должна быть установлена версия php 5.3.

Перейти на сайт разработчиков и нажать на кнопку «Download Free», скачать архив с плагином.

После этого его устанавливают обычным образом через менеджер расширений.

Теперь мы создаем новый материал.

Под окном редактирования текста материала, появилась дополнительная кнопка «Вставить код».

Мы нажимаем на нее и появляется всплывающее окно для вставки кода.

Между специальными тегами {source} и {/source}, мы должны добавить код карты для вставки.

Например, код карты с элементами управления

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
 
            var myMap = new ymaps.Map('map', {                   
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
			//Добавляем элементы управления	
			 myMap.controls                
                .add('zoomControl')                
                .add('typeSelector')                
                .add('mapTools');	
 
 
        }
    </script>
 
<div id="map" style="width:600px; height:400px"></div>

Нажимаем на кнопку «Вставить» и наш код добавляется в окно редактора.

Сохраняем страницу.

Открываем нашу страницу на сайте и наблюдаем карту

Посмотреть пример

Так мы можем легко добавить в статью любой код карты.

Если в коде карты используется библиотека jQuery, то из-за того что в Joomla по умолчанию подключена другая JavaScript библиотека Mootools возникает конфликт.

Код карты работает неверно.

Эту проблему можно решить двумя способами:

отключить использование библиотеки Mootools, использую специальные плагины или отредактируя код;
Использовать jquery совместно с Mootools, Как это сделать, можно посмотреть на сайте jquery: http://api.jquery.com/jQuery.noConflict/

Приведу несколько примеров из документации.

Во многих библиотеках JavaScript используется $ как функция или название переменной, как и в JQuery. В случае JQuery, $ это просто псевдоним для JQuery, поэтому все функции доступны без использования $. Если нам потребуется использовать другую JavaScript библиотеку совместно с JQuery , мы можем вернуть управление $ обратно в другие библиотеки с помощью $.noConflict ():

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Здесь может быть код других библиотек, который использует $
</script>

В этом случае для jQuery кода вместо $ используется jQuery

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Вместо jQuery можно использовать другое имя:

var jq = jQuery.noConflict();
// Do something with jQuery
jq("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Так можно использовать код jQuery с $, когда DOM будет загружен:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Здесь jQuery's код, с $
  });
  // Здесь может быть код других библиотек, который использует $
</script>

jQuery с $

jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

и краткая запись jQuery с $:

jQuery.noConflict()(function(){
    // code using jQuery
}); 
// other code using $ as an alias to the other library

В зависимости от ситуации нужно использовать тот или иной вариант решения.

Давайте добавим на страницу код из заметки «Построение автомобильных маршрутов, используя API Яндекс.Карт 2.х», код первого примера:

<!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>Добавление маршрута на карту - API Яндекс.Карт 2.х</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">	
		var myMap, route;
 
 
		// Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            myMap = new ymaps.Map("map", {
                    center: [56.326944, 44.0075],
                    zoom: 12
                });       
 
 
		 $('#search_route').submit(function () {                
			var start = $("#start").val();
			var end = $("#end").val();			
            ymaps.route([
                   // Список точек, которые необходимо посетить
                   [start], [end]], {
                // Опции маршрутизатора
                mapStateAutoApply: true // автоматически позиционировать карту
            }).then(function (router) {
			    route && myMap.geoObjects.remove(route);
				route = router;
                myMap.geoObjects.add(route);
            }, function (error) {
                alert("Возникла ошибка: " + error.message);
            });
				return false;
			});
		 }	
 
 
    </script>
</head>
 
<body>
<form id="search_route">
<b>Начало: </b>
<input id="start" type="text" value="Нижний Новгород, " style="width: 360px;"><br />
<b>Конец: Синема Парк DeLuxe IMAX</b>
<input id="end" type="text" value="Нижний Новгород, ул. Бетанкура 1" style="width: 260px;">
<input type="submit" value="Найти"/>
</form>
<br />
<div id="map" style="width:800px;height:600px"></div>
</body>
</html>

Немного изменим его для вставки в статью Joomla:

<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
 
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" 
            type="text/javascript"></script> 
    <script type="text/javascript">	 
		var myMap, route; 
 
		 jQuery.noConflict(); 
 
		// Как только будет загружен API и готов DOM, выполняем инициализацию 
        ymaps.ready(init); 
 
        function init () { 
            myMap = new ymaps.Map("map", { 
                    center: [56.326944, 44.0075], 
                    zoom: 12 
                });        
 
 
 
		 jQuery('#search_route').submit(function () {                 
			var start = jQuery("#start").val(); 
			var end = jQuery("#end").val();			 
            ymaps.route([ 
                   // Список точек, которые необходимо посетить 
                   [start], [end]], { 
                // Опции маршрутизатора 
                mapStateAutoApply: true // автоматически позиционировать карту 
            }).then(function (router) { 
			    route && myMap.geoObjects.remove(route); 
				route = router; 
                myMap.geoObjects.add(route); 
            }, function (error) { 
                alert("Возникла ошибка: " + error.message); 
            }); 
				return false; 
			}); 
		 }	 
 
 
    </script> 
 
<form id="search_route"> 
<b>Начало: </b> 
<input id="start" type="text" value="Нижний Новгород, " style="width: 360px;"><br /> 
<b>Конец: Синема Парк DeLuxe IMAX</b> 
<input id="end" type="text" value="Нижний Новгород, ул. Бетанкура 1" style="width: 260px;"> 
<input type="submit" value="Найти"/> 
</form> 
<br /> 
<div id="map" style="width:800px;height:600px"></div>

Здесь мы удалили из кода всю разметку страницы, после строки объявления переменных myMap, route добавили строку:

jQuery.noConflict();

И далее в коде заменили символ $ на jQuery.

Создаем новую страницу, вставляем наш код и смотрим ее в браузере

Посмотреть пример в действии

В качестве начальной точки вводим адрес: «Нижний Новгород, ул. Шорина, 13»

И стоим маршрут

Все прекрасно работает.

Очень надеюсь, что данная статья поможет Вам при создании проектов в CMS Joomla.

Добавить комментарий

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