Плагин Google Maps для Joomla

На страницах данного блога я уже писал о плагине Яндекс.Карт для Joomla, в этой заметке я хочу рассказать вам о плагине Google Maps для Joomla.

С начала я расскажу об основных возможностях плагина и после этого рассмотрю несколько примеров его использования.

Скачать сам плагин можно по адресу: http://joomlacode.org/gf/project/mambot_google1/frs/

Данное расширение представляет собой плагин (мамбот) для отображения одной или нескольких карт Google в содержании страниц, модулей и компонентов системы Joomla верий 1.0.x и 1.5.x.

После стандартной для Joomla процедуры установки нужно активировать данное расширение в менеджере плагинов.

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

У него много различных параметров, но для начала его использования нам понадобятся только два - Активировать (Enabled) для активации плагина и Google API key в правой части окна, для ввода ключа к API Google Maps.

Сохраняем сделанные настройки.

Для добавления карты в нашу статью нужно в её текст добавить специальный тег { mosmap}.

При просмотре страницы на сайте в место него будет расположено изображение карты с параметрами по умолчанию (задаются в настройках плагина).

Тег mosmap может содержать в себе параметры отображения карты.

Я перечислю основные из них.

width, height - параметры ширины и высоты окна карты, могут задаваться как в пикселях, так и в процентах;

lat, lon - значение широты и долготы центра карты;

zoom - значение масштабного уровня карты;

zoomNew - когда равно 1 при двойном клике мышью происходит центрирование и масштабирование в данной точке, а при равном 0 только центрирование ( по умолчанию - 0);

zoomType - тип элемента масштабирования (Small - малый или Large - большой, None - отсутствует);

mapType - начальный тип карты (Normal - обычная по умолчанию, Satellite - спутник, Hybrid - гибридное, Terrain -ландшафт );

showMaptype - отображать или нет переключатель типа карты;

overview - показывать или нет обзорную карту (1 - показывать, 0 - нет);

text - текст для маркера в балуне, если хотите чтобы текс не отображался наберите text='', для добавления гиперссылок в текст используйте код следующего формата <a href=linkAddress target=linkTarget title=linkTitle>linkName</a>, не используйте двойные кавычки.

tooltip - использовать Tooltip, когда мышь наводиться на маркер, не используйте html;

marker - открывать или нет информационное окно для маркера на начальном этапе загрузки карты (1- открывать, 0 - нет);

icon - для задания пути (url) к файлу изображения пользовательской иконки;

kml - для задания пути (url) к файлу в формате KML ;

lightbox - для задания ссылки или кнопки , чтобы отображать карту во всплывающем окне.

Чтобы Вам окончательно стало понятно как с данным плагином работать рассмотрим несколько примеров.

Пример 1. Простая карта с маркером.

Для этого в страницу Вы должны добавить следующую строчку:

{mosmap width='500'|height='400'|lat=' 56.3333|lon='44.0'|zoom='10'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|overview='0'|text='Нижний Новгород'|lang=''}

Загрузив страницу в браузере, мы увидим следующее



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

Пример 2. Карта со своим значком для иконки и html-текстом в балуне.

Добавим строку вида:

{mosmap width='500'|height='400'|lat='56.315455|lon='44.017152'|zoom='15'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|icon='http://webmap-blog.ru/examples/files/theater.png'|iconwidth='30'|iconheight='30'|iconanchorx='-15'|iconanchory='-15'|overview='0'|text='<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>'|lang=''}

Загрузив страницу в браузере, мы увидим следующее



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

Пример 3. Карта с использованием KML-файла.

Для этого добавим строку вида:

{mosmap kml='http://webmap-blog.ru/files/kinoteatrs.kml|'overview='0'}

Загрузив страницу в браузере, мы увидим следующее



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

Пример 4. Карта во всплывающем окне.

Для этого добавим строку вида:

{mosmap lightbox='1'|lbxwidth='600px'|lbxheight='600px'|show='0'|align='none|width='500'|height='400'|lat='56.315455|lon='44.017152'|zoom='15'| zoomType='Large'|zoomNew='1'|mapType='Normal'| showMaptype='1'|icon='http://webmap-blog.ru/examples/files/theater.png'|iconwidth='30'|iconheight='30'|iconanchorx='-15'|iconanchory='-15'|overview='0'|text='<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>'|lang=''}

Загрузив страницу в браузере, мы увидим следующее



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

Все примеры на одной странице здесь

Более подробную информацию о плагине и примеры его использования можно найти по адресу http://tech.reumer.net/Google-Maps/Demo-Google-Maps/