Плагин 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=»}

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

Простая карта с маркером - Google Maps для Joomla

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

Пример 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=»}

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

Карта со своим значком для иконки и html-текстом в балуне - Google Maps для Joomla

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

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

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

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

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

Карта с использованием KML-файла - Google Maps для Joomla

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

Пример 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=»}

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

Карта во всплывающем окне - Google Maps для Joomla

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

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

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

  • Гость: Мне вот интерестно как скрыть ментку. Если ее не ставить то выводиться карта по умолчанию.
  • Гость: а на локальном хосте работает???
  • Гость: Да, естественно карта будет отображаться при подключении к интернету
  • Гость: что-то у меня не отображается карта на странице, если я добавляю строку mosmap с какими-то параметрами. Вы не могли бы объяснить, какой пункт в настройках самого плагина отвечает за текст, который выводится над меткой?
  • Гость: Карта может не отображаться, если вы пропустили знак апострофа при задании параметров. <a href="http://tech.reumer.net/Google-Maps/Demo-Google-Maps/Map-with-marker-with-tooltip.html" rel="nofollow">http://tech.reumer.net/Google-Maps/Demo-Google-Maps/Map-with-marker-with-tooltip.html</a> пример вовода текста принаведении курсора на метку, параметр tooltip
  • Гость: а можно ли с помощью этого плагина размещать собственные маркеры на карте?
  • Гость: Да размещение маркеров очень интересует! особенно с фронтенд!!!
  • Гость: Доброго времени суток! Уже который день бьюсь с эти плагином, но ни чего понять не могу - не хочет работать! Не чайник :) сделал все по инструкции но карта ни в какую отображаться не хочет! API проверенный, рабочий. Тэг джумла видит, но карты нет??? Подскажите кто нибудь пожалуйста, что не так! Коды копировал из статьи выше, ни один не работает... Буду очень благодарен за помощь!
  • Гость: Та же проблема
  • Гость: Дмитрий попрбуй так: {mosmap width='500' |height='400' |lat='46.460093'|lon='33.867588'|zoom='12'|mapType='Hybrid'} P.S. Код копируется очень плохо отсюда, лучше в редакторе открой HTML исходник и ручками набери... Как вариант, попробуй просто {mosmap} для начала ввести...
  • Гость: Блин, а как координаты точки нужной найти ? И что делать если номер дома который мне нужен не указан на карте ?
  • Гость: Для определения координат можно воспользоваться этим примером <a href="http://code.google.com/intl/ru-RU/apis/maps/documentation/examples/tile-detector.html" rel="nofollow">http://code.google.com/intl/ru-RU/apis/maps/documentation/examples/tile-detector.html</a>
  • Гость: Информация видимо для устаревший версии google map plugin, лично у меня из написанного НИЧЕГО не работает, но строчки, взятые из иностранных официальных источников работают на ура, а так просто карта тупо показывает мира. И как метки свои ставить и совмещать их с каталогом? Интересно было бы узнать
  • Гость: Я не знаю что Вы делали, но у меня все работает. Возможно Вы поменяли порядок координат для задания центра карты и меток. Еще много примеров приведено на сайте плагина по адресу: <a href="http://tech.reumer.net/Google-Maps/Demo-Google-Maps/" rel="nofollow">http://tech.reumer.net/Google-Maps/Demo-Google-Maps/</a>
  • Гость: А как создать карту, навтыкать в нее квадратиков, чтобы к каждому было свое описание и фотография?Ну и экспортировать в kml
  • Гость: А подскажите, как эту карту вставить в контакты на места выводимой картинки?
  • Гость: На днях напишу небольшую заметку по этому поводу
  • Гость: Спасибо заранее, буду ждать с нетерпением.
  • Гость: Скажите, была новая заметка, может я пропустила?
  • Гость: Спасибо за предыдущий ответ, действительно копируется некорректно! Ручками всегда лучше :) Единственное, не выводится почему то управление масштабом карты? Вроде в настройках плагина этого не нашел! И с маркером не понятно, как его отобразить? Спасибо еще раз!
  • Гость: При использовании мктода с открытием в новом окне гугл не принимает ключ... все остальные методы работают. С чем это может быть связано?
  • Гость: Давно использую данный плагин у меня все работает ... мне интересно сталкивался ли кто нить с доработкой улиц ??? у меня на одном сайте улица вдруг заканчивается и там где стоит дом клиента улицы нет как поправить карту гугл улицы ?
  • Гость: Всё работает,но не вставляется картинка в балун,только показывает место под неё и пропадает. Картинка у себя должна быть залита,или можно другой адрес давать? Что не так?
  • Гость: Нужно прописать полный путь к картинке, например, icon=’http://webmap-blog.ru/examples/files/theater.png’|
  • Гость: Да,ошибся с картинкой просто,Спасибо! Всё работает.
  • Гость: А почему же все таки может не отображаться управление масштабом карты? :(
  • Гость: Вы не забыли в строку параметров добавить zoomType=’Large’
  • Гость: Да нет был он у меня прописан... Впрочем здесь мне кажется проблема в хостере, потому что вдруг все заработало как надо! У меня остается одна дилемма, как выводить несколько маркеров, что бы можно было обрисовать границы, например?
  • Гость: Появилась проблема в ie7 и ie8 - не подгружает карту и все тут. Никто с подобным не сталкивался?
  • Гость: здравствуйте, возможно ли использовать данный плагин для разных страниц сайта и разных координат для каждой. например, есть галерея с фотографиями. для одной фотографии вывести одну карту, для другой - другую и т.д. ? или может другое решение сможете подсказать...
  • Гость: Здравствуйте!Возможно ли добавлять маркеры во время просмотра карты?
  • Гость: Здравствуйте! У меня такой вопрос - как с помощью этого плагина пользователь сайта может оставить метку(маркер) на свой дом, например? как сохранить эту метку (координаты), чтобы другой пользователь сайта мог посмотреть, где живет первый пользователь? Т.е. как пользователю добавить маркер и как сохранить этот маркер?
  • Гость: А как вставить две разные карты на одну страницу.....даже если ввожу по отдельным координатам то вторая карта копия первой..бред какой-то. Подскажите плиз
  • Гость: Спасибо за статью. Только вот никак не могу используя КМЛ файл найти тег, который отвечает за вывод альтернативного текста маркера при наведении на него а не при нажатии. Может кто-то подскажет?
  • Гость: Подскажите пожалуйста. Почему у меня не открывается фотография. Вставляю в статью строку ввода все работает фотки нет. Пример http://surrogacyspecialists.com/index.php?option=com_content&amp;view=article&amp;id=106&amp;Itemid=82&amp;lang=ru. Если кто-то знает с чем это связано, напишите пожалуйста.
  • Гость: Разобралась сама. Все равно спасибо за статью на сайте.
  • Гость: Здравствуйте. Подскажите, как перевести названия кнопок? "Hybrid, Normal..." ?
  • Гость: Есть ли возможность проложить маршрут карты в этом плагине?
  • Гость: Для отображения маршрута можно использовать KML и GPX файлы, примеры: <a href="http://tech.reumer.net/Google-Maps/Demo-Google-Maps/KML-as-overlay.html" rel="nofollow">http://tech.reumer.net/Google-Maps/Demo-Google-Maps/KML-as-overlay.html</a> и <a href="http://tech.reumer.net/Google-Maps/Demo-Google-Maps/GPX-files.html" rel="nofollow">http://tech.reumer.net/Google-Maps/Demo-Google-Maps/GPX-files.html</a>
  • Гость: Для этого веб-сайта требуется другой ключ API Карт Google. Новый можно получить на странице http://code.google.com/apis/maps/. В чем дело? Генерирую ключ, вставляю, не работает просит новый ключ.
  • Гость: Сам разобрался! Не в то поле ключ вставлял.
  • Гость: Никто часом не разобрался по какой причине не хочет работать в Internet Explorer?
  • Гость: Все поставил все вроде бы хорошо н опочему то сам плагин и все города на английском языке как сделать русскйи подскажите плз
  • Гость: API понимает настройки браузера и соответствующим образом выбирает язык. Язык можно изменить добавив дополнительный параметр к ключу АПИ &amp;hl=ru
  • Гость: А как вставить код в стандартный компонент контактов?
  • Гость: На сайте разработчика есть статья по изменению Joomla 1.0 <a href="http://tech.reumer.net/Google-Maps/Documentation-of-plugin-Googlemap/Maps-in-components-contact.html" rel="nofollow">здесь</a> Вы можете также использовать другой <a href="http://webmap-blog.ru/google-maps/komponent-kontaktov-dlya-cms-joomla-contactmap" rel="nofollow">компонент контактов</a>
  • Гость: Подскажите кто сталкивался - не могу выставить масштаб. Хоть 3 ставлю хоть 20 - масштаб по умолчанию....Што делать?!
  • Гость: Подскажите, по примеру №1 у меня не всплывает так называемый балун (инфовиндоув), не показывает даже когда кликаешь на маркер, в чём может быть проблема? В настройках плагина infowindow включено.
  • Гость: Жаль что не ответил никто на вопрос здесь уже прозвучавший. Попробую еще раз задать. Могут ли пользователи с помощью этого плагина добавлять метки на карту? То есть сделать форму добавления меток на карту, так что все остальные их видели после добавления.
  • Гость: Не могут, нужно его дорабатывать
  • Гость: Добрый день! У меня проблема с Joomla 1.6 ставлю этот плагин все работает но он автоматом у меня переключает на английский язык -язык сайта, хотя основным у меня является, весь код перелопатил так и не пойму откуда он язык переключает
  • Гость: В параметрах плагина есть опция Language option, нужно выбрать значение User, а в следующем параметре Language ввести значение ru. Тогда карта будет отображаться обозначениями по русски. И еще появилась русская локализация для Joomla 1.6, ее можно скачать <a href="http://joomlaportal.ru/content/view/2242/70/" rel="nofollow">здесь</a>.
  • Гость: Здравствуйте! У меня такая проблема. Установил этот плагин, в его настройка по умолчанию уже введены значения широты и долготы, после того как я пишу параметры в статье {mosmap} и так далее, то на сайте выводяться две карты одна по тем координатам, которые заданы по умолчанию и по тем, которые я задаю в статье. Даже если в настройках плагина широту и долготу я убираю, то все равно выводяться две карты. А как сделать, чтобы выводилась только одна, с моими настройками?
  • Гость: Здравствуйте! Установил плагин, в настройках убрал координаты по умолчанию, но почему-то все равно когда карта загружается на ней есть один маркер где-то в Нидерландах. Как его можно убарать?
  • Гость: поставьте компонент Phoca Map и не мучайтесь. Простой компонент, добавляет карты без всяких активирований API разобраться очень просто, есть русский язык.Никаких многострочных кодов писать не надо. сайт www.phoca.cz
  • Гость: На самом деле есть еще более простой вариант: - Скачиваете модуль PHP для Joomlы - в окно для разного вида кодов (PHP HTML JS и тд.) вставляеете сслыку из гугл карт для вставки на свой сайт и все ) .
  • Гость: Пример (когда ручками прописал в {mosmap} параметры) работает корректно, кроме одного НО (!) - названия улиц и тд на английском. в качестве googlewebsite использую Russian, язык пробовал менять всячески, ан нет. Всё одно - названия улиц и прочих объектов на агнлийском. В чём может быть проблема?
  • Гость: В параметрах плагина есть опция Language option, нужно выбрать значение User, а в следующем параметре Language ввести значение ru.
  • Гость: подскажите, почему-то не подхватывает данные из kml фаила. настройки дефолтные.
  • Гость: А KML-файл где лежит? Он должен быть доступен из Интернета для обработки API, если он лежит на локальном компьютере, то он не будет обрабатываться.
  • Гость: Добрый день, а можно без kml файла отображать множество маркеров на карте? допустим просто введя широту и долготу...
  • Гость: На сайте разработчика такого примера нет, надо пробывать
  • Гость: Спасибо за инфу - плагин суперский, но вот что делать если БАЛУН не выводится ? Карта отображается , но нету балуна совсем :( Помогите плиз !
  • Гость: Проверьте все ли параметры Вы правильно указали, а также содержаться в тексте балуна апострафы. Сравните с примером <a href="http://tech.reumer.net/Google-Maps/Demo-Google-Maps/show-all.html" rel="nofollow">пример</a>
  • Гость: А можно ли устанавливать точки на карте непосредственно с сайта?
  • Гость: Нет
  • Гость: Уменя такой вопрос - сайт в зоне .RU с алиасом в .РФ - как корректно прописать API - в мульти - не работает - пишет (когда заходишь через алиас) что не тот апи-кей, хотя и указывал в мульти апи: http://мойдомен.рф/;my_api_key может в подсказке что не так с синтаксисом???
  • Гость: Я установил плагин, но почему та не понял, как ее вытащить на сайт, я еще новичок, первый сайт у меня! Пожалуйста помогите.
  • Гость: Нужно в текст статьи добавить {mosmap ...}, где вместо многоточия добавить необходимые параметры для отображения карты, см. заметку. Еще примеры можно посмотреть <a href="http://tech.reumer.net/Google-Maps/Demo-Google-Maps/" rel="nofollow">здесь</a> Пример записи: {mosmap width='500'|height='400'|centerlat='56.3333'|centerlon='44.0'|zoom='13'| zoomType='Large'|zoomNew='0'|mapType='Normal'|showMaptype='0'|overview='0'}
  • Гость: у меня такая проблема, вылазит в конце строки тег(') после сохранения статьи с картой, а до карты прописываются тэги пустой строки( ), но они не мешают - их не видно.
  • Гость: Сталкивался ли кто-то с такой проблемой, когда при добавлении русского текста в балун - {mosmap text='Тест'} - балун не выводится? Если текст писать на английском, то все ок.
  • Гость: Разобрался - косяк происходит, когда версия api выставлена в 3.x. Для 2.x все в порядке.
  • Гость: Скажите а как сделать вывод двух разных карт на одной странице? добавил два тега mosmap и ввел разные координаты, появилось две карты и на обеих координаты и те и те. А как сделать чтобы карты для разных координат были свои?
  • Гость: На сайте разработчика есть <a href="http://tech.reumer.net/Google-Maps/Demo-Google-Maps/multi-maps.html" rel="nofollow">пример</a>, нужно задавать разные параметры для карты. Еще мой <a href="http://webmap-blog.ru/joomla-test/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=10" rel="nofollow">пример</a> Параметры центра карты задаются centerlat и centerlon
  • Гость: Помогите пожалуйста! Не работает Lightbox, не отображается ссылка 'Open lightbox', в чем дело?
  • Гость: Почему-то Lightbox не работает с API Google Maps v3 (версия плагина 2.14), для работы нужно в настройках плагина указать Google API version: 2.76 (использоватьAPI Google Maps v2 ). Тогда все работает нормально, смотрите <a href="http://webmap-blog.ru/joomla-test/2012-01-04-09-20-05.html" rel="nofollow">пример</a>.
  • Гость: Значит у Google нет данных на этот участок
  • Гость: Можно ли вводить url картинки через "" , у меня не видит :(
  • Гость: После установки плагина(googlemap_2.15) возникла ошибка: Warning: Missing argument 2 for plgSystemPlugin_googlemap2::onContentPrepare() in ..../plugins/system/plugin_googlemap2/plugin_googlemap2.php on line 90 Warning: Missing argument 3 for plgSystemPlugin_googlemap2::onContentPrepare() in ..../plugins/system/plugin_googlemap2/plugin_googlemap2.php on line 90
  • Гость: Ругается на отсутствия какого-то аргумента. Проверьте параметры в настройках плагина. Последняя версия может работать как с API Google Maps v2. так и v3. Посмотрите какая версия API используется у Вас.
  • Гость: Установил 2.15, работает отлично, но есть проблема с Lightbox. Если ставить Google API version 3.x, то карта показывается на страничке, если ставить версию 2.76, 2.х или 2.s, то выводится ссылка Lightbox'a, но почему-то не открывается. В чем может быть причина?
  • Гость: Помогите получить ключ Api ато не как не получается куда заходить нужно?
  • Гость: Смотрите <a href="http://webmap-blog.ru/google-maps/problema-polucheniya-klyucha-dlya-ispolzovaniya-api-google-maps-v2" rel="nofollow">здесь</a>
  • Гость: Ну так как вывести на одной страницы этот материал с картой и стандартный компонент - контакты?
  • Гость: и в ручную набирал и как в примере вставлял, и просто {mosmap} не хочет никак
  • Гость: Вы плагин включили?
  • Гость: Большое спасибо автору, помогло многое. Возник вопрос: на локальном хосте поддержка *.kml судя по всему работать не будет? Удобно сначала на локальном набрать KML , а потом выложить его.
  • Гость: Да, на локальном не работает
  • Гость: Здравствуйте. Подскажите пожалуйста можно ли, чтобы имя метки всегда высвечивалась над ней, а не только после того как на неё нажал?
  • Гость: Я не уточнил, сделать так в kml-файле, а имя метки, чтобы оно высвечивалось как в Google Earth. Или хотя бы просто, чтобы постоянно весело описание метки, без нажатия на неё.
  • Гость: Здравствуйте, подскажите, пожалуйста. Я использую mosmap для Joomla 1.7. При открытии материала под Windows я вижу в правом верхнем углу три типа карт "Карта","Спутник","Earth". При работе любым браузером под Mac OS позиция "Earth" не отображается.
  • Гость: Для отображения типа Earth необходимо установить специальный плагин, существует версия для Apple Mac OS X 10.4 и последующие версии (Intel и PowerPC). Скачать его можно <a href="http://www.google.com/earth/explore/products/plugin.html" title="Плагин" target="_blank" rel="nofollow">здесь</a>
  • Гость: Здравствуйте, у меня не отображается картинка в балуне, все перепробовал, а картинки нет, хотя в балуне отображается место под картинку, url указан правильно.
  • Гость: Хорошая мысль. Соглашусь пожалуй. Нравится мне этот блог.
  • Гость: Все типа работает, но почему-то показывает только карту с выбранной точкой (широта, долгота). Путь из файла KML, KMZ, GPX - никак не хочет показывает, берет как будто только общие настройки плагина, а параметры из mosmap не берет...
  • Гость: А есть ли возможность вместо карты Яндекс использовать свою? Т.е. весь функционал меток, но на своей карте-картинке?
  • Гость: Возможно глупый вопрос... Можно ли использовать этот плагин без APi? Плагин уже стоит, мне нужна только карта, если удаляю апи который был изначально предустановлен выдает --> "Google не допускает использования API Карт для этого приложения. Предоставленный ключ API Google недействителен, либо нет разрешения на его использование с Google Maps JavaScript API V3 на этом сайте. Если это приложение принадлежит вам, информацию о получении рабочего ключа вы можете найти здесь: https://developers.google.com/maps/documentation/javascript/tutorial#api_key." И автоматически вставляет тот апи который был. Можно ли что-то сделать?