4 простых расширения карты на сайт. Maps google joomla


Как вставить Google Maps на Joomla сайт

В этой статье я расскажу как вставить модуль google map на сайт, сделанный на Joomla.

1. Для начала вам необходимо скачать модуль с гугл картами.

2. Заходим в панель администратора и открываем раздел «Расширения->Менеджер расширений» («Extensions->Extensions manager»). Во вкладке «Загрузить из пакета» выбираем скачанный модуль и устанавливаем его.

module-upload

 

3. Переходим к настройке модуля. Открываем раздел «Расширения->Менеджер модулей» («Extensions->Module manager»). Находим наш модуль, он называется «Google map».

gmap-module

 

4. Во вкладке «Настройки меток» («Marker options») задается положение и внешний вид иконок, отображаемых на гугл карте. Существует возможность как ввести координаты вручную, так и просто задать адрес (в этом случае координаты будут определены автоматически). Далее можно задать внешний вид иконки и заполнить окно с дополнительной информацией (оно будет отображаться по клику на метку).

gmap-set-cords

 

5. Во вкладке основных настроек «Модуль» («Module») можно задать масштаб, размеры и тип google карты, а также способ ее выравнивания на странице. Также для работы карты необходимо получить и задать Google Map Api Key. Получить его можно бесплатно, зарегистрировав свой сайт по этой ссылке.

Google map Api keys

6. Если мы хотим отображать карту на какой-то позиции шаблона, то нам необходимо выбрать эту позицию, на вкладке «Привязка к пунктам меню» («Menu Assigment») выбрать страницы для отображения и опубликовать модуль google map.

gmap-options

 

7. Если требуется отобразить карту в материале, например на странице «Контакты», то мы открываем материал для редактирования в менеджере материалов и пишем название модуля в фигурных скобках: {loadmodule mod_google_map}.

google map joomla

 

Ниже прилагается видео, в котором подробно описан процесс установки и настройки модуля google maps.

joomly.ru

My Maps location – карта Joomla

 

 

My Maps location – русскоязычный компонент и модуль Joomla для вставки карт Google на сайт с возможностью добавления своих местоположений с описанием. Можно создавать страницы с поиском местоположений по адресу, названию, категории, почтовому индексу и метками (тегам Joomla). Можно применять карты от таких поставщиков: Google, Bing, Mapbox, Mapquest, Mapillary, Open Street Map. Доступно три макета страницы поиска местоположений (объектов на карте) и 10 тем оформления (дизайн) карт. В состав расширения входит несколько модулей: модуль поиска, модуль отображения карт в Joomla и несколько модулей для отображения объектов из других расширений (стандартный менеджер материалов Джумла, DJ-Classifieds, K2, Hikashop, Community Builder и другие). Поддерживается геолокация, построение маршрутов, мультиязычность и множество других функций, которые делают компонент весьма универсальным.

На демонстрационном сайте разработчика доступно три примера: пример №1, пример №2, пример №3.

Местоположение или объект – это отметка на карте. То, что Вы или Ваши пользователи добавляете на карту.

В предыдущей статье «Обзор Hotspots. Карты Google для Joomla» уже рассматривался подобный по назначению компонент, как вариант. Полезно почитать о нём. А в статье «Обзор Linky Map. Создание своей карты» есть информация о компоненте для создания своих векторных карт.

В обзоре будет участвовать последняя, на момент написания статьи (17.02.2018), русскоязычная версия My Maps location 4.0.3 в Joomla 3.8.5. Основной шаблон сайта – JM Computers and Electronics VirtueMart Storeу 1.11. На примере менеджера материалов Joomla (com_content). Обратите Ваше внимание, что внешний вид страниц компонента Google карт Joomla достаточно сильно зависит от шаблона сайта и, возможно, потребует внесения корректировок в стили для достижения более гармоничного внешнего вида.

На официальном сайте расширений Joomla 120 отзывов, расширение добавлено 19.11.2014.

На данный момент (17.02.2018) стоимость расширения от $34.

Особенности My Maps location

Рассмотрим основные особенности данного расширения.

Местоположения.

My Maps location

Поиск объектов на карте.

Карта Joomla

Карта.

Google карты для Joomla

Интеграция с расширениями.

Вставка карты на сайт Joomla

Разное.

Компонент

Рассмотрим основные возможности компонента My Maps location. Для удобства в интерфейсе компонента есть несколько разделов:

  1. Местоположения.
  2. Категория.
  3. Импорт – Экспорт.
  4. Настройки.
  5. Поля.
  6. Группы полей.

Рассмотрим их по очереди, затрагивая только наиболее интересные/важные, на мой взгляд, опции.

Местоположения. Тут (рисунок ниже) Вы сможете создавать и управлять местоположениями. Отмечу, что это доступно также и из фронтальной части сайта.

Местоположения

При создании местоположений (рисунок ниже) Вы сможете указать описание, изображение, маркер местоположения, мета-данные и другую информацию о местоположении, которая будет отображаться на странице поиска, самой карте и странице с подробным описанием местоположения. Можно автоматически «подтянуть» часть информации с сервиса Google Place, указав ID местоположения в опции ID Google Place. Это ID можно узнать тут.

Для добавления меток сперва необходимо создать их в компоненте Метки. Это штатный компонент.

My Maps location

На рисунке ниже показан пример страницы с полным описанием местоположения. Это страница самого компонента карт Joomla. На неё пользователь сможет попасть или из меню, или нажав на ссылку в результатах поиска по карте. Если Вас что-то не устраивает, можно создать описание местоположения в любом расширении и при помощи опции Внешний URL указать ссылку на описание. Она может вести на Ваш сайт, на любой другой сайт или на пункт меню Вашего сайта.

При указании расположения объекта на карте можно сделать это вручную (поставив маркер), указать адрес, указать координаты (широту и долготу) или воспользоваться поиском и указать подходящий вариант из результатов поиска (по объектам на картах Google).

Страница с описанием местоположения

Категория. В данном разделе Вы сможете создавать и управлять категориями местоположений (рисунок ниже). В дальнейшем они пригодиться для фильтрации и поиска местоположений на картах Google, а также для настройки отображения пунктов меню и модулей карт.

Категории

Каких-то особых настроек у них нет (рисунок ниже), разве что во вкладке Пожалуйста, выберите маркер можно указать маркер категории объектов на карте. По умолчанию доступно более 60 изображений маркера с возможностью загрузки своих.

Настройка категорий местоположений

Импорт – Экспорт. В этом разделе (рисунок ниже) Вы можете импортировать, экспортировать или синхронизировать местоположения при помощи файлов формата «.csv» или «.kml». Это особенно удобно для создания/обновления большого количества местоположений или их резервного копирования. Хотя лично я для резервного копирования предпочитаю Akeeba Backup Pro.

Импорт – Экспорт

Для работы с «.csv» файлами рекомендую использовать LibreOffice Calc. Это бесплатный редактор таблиц на русском языке для Windows, Linux и Mac OS X. На рисунке ниже показаны параметры для открытия экспортированной таблицы из My Maps location в LibreOffice 6.0.1.1 х64.

Параметры импорта

Если Вы хотите обновить информацию о местоположениях при помощи импорта-экспорта, то:

  1. Экспортируйте данный из My Maps location в CSV.
  2. Отредактируйте их, не меняя ID записей (рисунок ниже).
  3. Сохраните файл.
  4. Импортируйте обратно в My Maps location.

А если надо добавить новое местоположение, тогда не нужно указывать никаких ID для новых записей. Они будут созданы автоматически.

Редактирование CSV файла

Если Вы добавили новые записи непосредственно в таблицу базы данных My Maps location, воспользуйтесь кнопкой синхронизации – Sync.

В конце данной статьи Вы найдёте CSV файл с примером экспортированных местоположений.

Настройки. Все глобальные настройки компонента карт Joomla разделены на 8 вкладок:

  1. Основные настройки.
  2. Расширенные настройки отображения.
  3. Поставщик карт.
  4. Рейтинги и комментарии.
  5. Joomla article location (местоположения в материалах Joomla).
  6. Обновление. Тут Вы сможете включить обновление My Maps location с сервера разработчика (если статус Вашей подписки это позволяет.)
  7. Тут у Вас будет доступ к загрузке и редактированию локализаций интерфейса расширения Google карт.
  8. Права. Эта вкладка содержит опции, позволяющие настроить разграничение прав доступа групп пользователей к компоненту. В том числе, тут можно настроить возможность создания, изменения и удаления местоположений на карте из фронтальной части сайта (рисунок ниже).
Права

Вкладка Основные настройки (рисунок ниже) содержит общие, глобальные настройки, действующие на все страницы, модули и плагины My Maps location. Однако, некоторые из заданных тут параметров можно переопределять в настройках пунктов меню, модулей и плагинов.

На этой вкладке можно включить/отключить AJAX поиск (вывод результатов поиска без перезагрузки страницы), включить отображение расстояния между объектами, задать единицы измерения (километры или мили), указать API ключ карт Google, Bing, а также настроить внешний вид, функционирование карты и набор её элементов.

Тут же можно выбрать, карты какого поставщика Вы хотите использовать.

Основные настройки

Вкладка Расширенные настройки отображения (рисунок ниже) содержит опции, позволяющие более тонко настроить внешний вид карты на сайте. Обратите внимание, что некоторые из этих настроек могут быть переопределены в настройках пунктов меню, модулей и плагинов.

На этой вкладке можно изменить формат адреса, выводимого в описаниях местоположений и добавить к описаниям местоположений настраиваемые поля. Настраиваемые поля предварительно нужно создать в штатном компоненте Joomla – «Поля».

Также эта вкладка содержит некоторые настройки для конфигурации интеграции My Maps location со сторонними расширениями.

Расширенные настройки отображения

Вкладка Поставщик карт (рисунок ниже) содержит опции для настройки применения карт таких сервисов как: Mapbox, Mapquest и Mapillary.

Поставщик карт

Вкладка Рейтинги и комментарии (рисунок ниже) содержит опции для настройки отображения на карте отзывов и рейтингов объектов, а также для интеграции с компонентами комментариев.

Рейтинги и комментарии

Вкладка Joomla article location (местоположения в материалах Joomla) (рисунок ниже) содержит опции, которые добавляют вкладку My Maps location в визуальный текстовый редактор материалов Joomla.

Местоположения в материалах Joomla

На этой вкладке (рисунок ниже) Вы можете создать местоположение точно так, как Вы это делаете в самом компоненте My Maps location. Это служит альтернативным «источником» местоположений для карт.

Вкладка My Maps location

Кроме этого, независимо от настроек на вкладке Joomla article location Вы можете вставить в материал Joomla уже созданные в компоненте My Maps location местоположения (рисунок ниже).

Вставка карты Google в материал Joomla

Поля и Группы полей. В этих разделах Вы сможете создавать настраиваемые поля для унифицированного добавления информации к местоположениям. Например, можно создать поле «Ближайшая станция метро» (рисунок ниже).

Настраиваемое поле

Это поле появится на страницах добавления описания местоположения и в информации о местоположении. Типов полей и настроек достаточно много. Они реализованы при помощи штатного компонента Joomla – «Поля».

Модули карт Joomla, пункты меню и плагины

Чтобы вставить карту на сайт Joomla у Вас есть несколько «инструментов»: модули, пункты меню и плагины.

Модули. My Maps location идёт в составе с семью модулями:

  1. Community - My Maps Location. Отображает местоположений из компонента социальной сети JomSocial.
  2. Joomla Article/Flexicontent My Maps. Отображает местоположения из компонента материалов Joomla и из FLEXIcontent.
  3. My Maps Location CB Members. Отображает местоположения из компонента социальной сети Community Builder.
  4. Hikashop Vendor My Map locations. Отображает местоположения из компонента интернет-магазина Hikashop.
  5. K2 My Maps location. Отображает местоположения из компонента K2.

Модуль My Maps Location Map-Search Module отображает форму поиска по местоположениям (рисунок ниже, верхняя часть). В его настройках (рисунок выше, нижняя часть) можно указать компонент, в местоположениях которого нужно искать объекты (My Maps location, K2, DJ-Classified, My Testimonials и так далее), указать категорию местоположений для поиска, ограничить радиус поиска от координат пользователя и задать другие настройки.

Модуль поиска

Модуль Map Module My Maps Locations отображает карту с нанесёнными на неё объектами (рисунок ниже, верхняя часть). В его настройках (рисунок выше, нижняя часть) можно указать, какие объекты нужно отображать (категорию/категории или отдельное местоположение, или несколько конкретных местоположений), задать размеры карты, указать её тип, стиль и другие характеристики. Указанные в модуле опции переопределяют опции, заданные в настройках компонента (для этого модуля).

Модуль «Map Module My Maps Locations»

Пункты меню. В арсенале My Maps location есть 4 типа пунктов меню:

  1. Location detail view (страница местоположения).
  2. Location search and display (поиск местоположения).
  3. Add location (добавить местоположение).
  4. My Locations (мои местоположения).

Пункт меню Location detail view позволяет отобразить ссылку на страницу с подробным описанием одного местоположения из My Maps location (рисунок ниже).

Страница с описанием местоположения

Помимо возможности указания, описание какого именно местоположения нужно выводить, есть ещё дополнительные опции (рисунок ниже). Вы можете изменить поставщика карт, тип карты, её оформление, задать размеры и масштаб по умолчанию. Указанные тут опции переопределяют опции, заданные в настройках компонента (для этой страницы).

Настройки пункта меню «Location detail view»

Пункт меню Location search and display позволяет отобразить страницу с поиском и перечнем местоположений. Доступно три макета (рисунок ниже).

Карта Joomla

Настроек достаточно много (рисунок ниже). При помощи них можно сконфигурировать внешний вид и функционирование страницы карты Joomla.

Настройки пункта меню «Location search and display»

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

Добавление местоположения из фронтальной части сайта

Пункт меню My Locations (рисунок ниже) выводит перечень добавленных ранее пользователем местоположений с возможностью их поиска, сортировки и добавления нового местоположения. Особых настроек у этого пункта меню нет. Для настройки прав доступа разных групп пользователей к этому пункту меню и пункту меню Add location перейдите в настройки компонента на вкладку Права.

Страница добавленных пользователем местоположений

Плагины. В My Maps location есть 6 плагинов. Их можно включить/отключить и настроить в менеджере плагинов Joomla.

  1. Content - My Maps Location. Позволяет вставить карту везде, где обрабатываются плагины содержимого. Можно задать размеры вставляемых карт, масштаб, тип, дизайн и другие опции.
  2. Editor - My Maps Location. Позволяет добавить инструмент (кнопку) в визуальный текстовый редактор для упрощения вставки карты на сайт Joomla (рисунок ниже).
  3. Flexicontent My Map Location. Служит для интеграции My Maps location с компонентом Можно задать размеры вставляемых карт, масштаб, тип, дизайн и другие опции.
  4. K2 Integration- My Maps Location. Служит для интеграции My Maps location с компонентом K2. Можно задать размеры вставляемых карт, масштаб, тип, дизайн, настроить фильтр по категориям и так далее.
  5. My Maps Location For Hikashop. Служит для интеграции My Maps location с компонентом Hikashop. Можно задать ассоциации для полей адреса.
  6. System - My Maps Location. Позволяет вставить карту везде, где обрабатываются плагины. Можно задать размеры вставляемых карт.
Вставка карты Google в материал Joomla

Получение ключа Google map API

На данный момент My Maps location сможет отображать карту Google только при наличии соответствующего ключа. Его нужно указать в настройках компонента на вкладке Основные настройки в поле API ключ Google Maps. Чтобы получить этот ключ, Вам понадобится аккаунт Google. Подойдёт любой: от Gmail, Google+, Google Analytics, Google Search Console и других сервисов Google.

Всё описанное ниже есть в видео уроке в конце данной статьи.

Шаг 1. Перейдите по этой ссылке.

Шаг 2. Введите свой логин и пароль от аккаунта Google.

Шаг 3. На первой старице нажмите Продолжить (рисунок ниже). Перед этим Вас могут попросить принять лицензионное соглашение. Сделайте это.

Подключение Google map API

Шаг 4. В качестве названия укажите что-то такое, чтобы было понятно, для чего Вы создали этот ключ. В списке Ограничение для ключа укажите HTTP-источники перехода (веб-сайты). Для опции Принимать http-запросы от следующих источников перехода (сайтов) (Необязательно) можно ничего не указывать или указать доменное имя Вашего сайта (без протокола) (рисунок ниже). Нажмите Создать.

Получение ключа Google map API

Шаг 5. В появившемся всплывающем окне скопируйте содержимое строки Ваш ключ API. Что-то подобное: «AIGaSyDLcGUZcue98Fp032n52Z_T5offA_caM4» (без кавычек). Это и есть ключ Google map API. Именно его и надо вставлять в настройках My Maps location на вкладке Основные настройки в поле API ключ Google Maps. Обязательно проследите, чтобы до и после ключа не было пробелов.

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

Вставка карты на сайт Joomla

Рассмотрим общий алгоритм вставки карты на сайт, созданной в компоненте My Maps location. Частично он показан в видео в конце данной статьи. Подробности настроек описаны в статье выше.

  1. Если хотите применять карту Google, то укажите в настройках API ключ сервиса.
  2. Создайте категорию карт.
  3. По желанию, создайте группы полей для описания объектов карты.
  4. По желанию, создайте поля для описания объектов карты.
  5. По желанию, создайте метки (в Компоненты – Метки).
  6. Создайте объект или объекты для карты.
  7. Для непосредственной вставки карты на сайт воспользуйтесь одним из вариантов: пункт меню, модуль, плагин.

Видео обзор и урок

 

 

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube, Rutube и Mail.ru.

Как видите, My Maps location достаточно функциональное расширение для вставки карт Google на сайт Joomla, особенно, учитывая его широкие возможности в плане интеграции со сторонними компонентами. А наличие выбора поставщиков карт, помимо Google, делает Вас менее зависимыми от какого-то картографического конкретного сервиса.

Похожие материалы

 

Полезные ссылки:

При скачивании файлов менеджерами загрузок возможны проблемы. ФайлОписаниеРазмер
Импорт местоположенийCSV файл с объектами для карты1 Кб

aleksius.com

4 простых расширения карты на сайт

Как вставить карту на сайт Joomla

Сегодня встраивание карт на веб-сайты становится тенденцией. Было бы ошибкой, если бы вы не сделали этого и для вашего сайта. Это делает вашу веб-страницу более современной и красивой, а также позволяет пользователям вашего сайта легко найти ближайшие к ним места.

Однако если вы еще не добавили карту на свой сайт - ничего страшного, мы покажем вам несколько способов вывести карту на свой сайт.

1. Html-модуль с Google Картами

Google Карта является оптимальным вариантом для большинства нужд пользователя

1: перейдите в расширения-->менеджер модулей и создать модуль "Карта Google" с типом "HTML код".

2: Откройте Google Карты и введите необходимый адрес в строку поиска

3: В новом окне нажмите кнопку "Поделиться" и скопируйте со вкладки "Код" код для вставки на сайт

google maps joomla

4. Поместите код в ваш HTML модуль (обязательно через исходный код)

5: После завершения всех шагов выше, нажмите кнопку "Сохранить"

6: перейдите на свой сайт, обновите страницу и проверьте, появилась ли Google Карта или нет.

 

 Google Карта Joomla

2. Модуль TZ MAP

1. Установите модуль на сайт

2. После установке откройте в менеджере модулей сам модуль TZ Map или создайте новый модуль с типом TZ Map

3. Для настройки модуля вам необходимо будет вставить долготу и широту необходимого местоположения. Определить широту и долготу вы сможете с помощью Яндекс.Карт.

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

Как настроить карты Joomla

 TZ Map Joomla 

Этот модуль карт очень хорош своими вариантами оформления! Можно выбрать наиболее подходящий вариант из предложенных.

СКАЧАТЬ

3. Модуль BT GOOGLE MAPS

Процесс установки данного модуля очень похож на установку предыдущего модуля, за небольшим исключением. В данном модуле вы можете ввести непосредственно адрес, а не широту и долготу. Хотя второй вариант также доступен!

Настройки карт Joomla 3

BT Maps Joomla

Давайте посмотрим на результат!

 

 

СКАЧАТЬ

4. TZ GOOGLE MAP

Этот модуль очень похож на предыдущие, однако в нем реализован немного другой способ оформления карты, с помощью которого данная карта идеально впишется в дизайн любого сайта на Joomla! 

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

Давйте посмотрим на результат:

красивая карта Joomla

 

СКАЧАТЬ

joomla.ru


Prostoy-Site | Все права защищены © 2018 | Карта сайта