1. Отримайте ключ API Карт Google

Щоразу, коли ви використовуєте API Карт Google, якщо ваш домен було створено після 22 червня 2016 року, ви повинні додати ключ для підтвердження свого запиту.
Отримайте ключ та ввімкніть API: https://developers.google.com/maps/documentation/javascript/get-api-key

Більше інформації: https://developers.google.com/maps/documentation/javascript/usage?hl=en

Перший крок – створити проєкт, а потім ввести назву проєкту.

Якщо я хочу дозволити всі запити з mydomain, то шаблон, якого слід дотримуватися, такий: *.joomunited.com/*.
Якщо ви хочете дозволити лише один домен, наприклад, mydomain.com, то шаблон буде таким: joomunited.com/*.

У середовищі localhost ви можете ввести будь-який дійсний ключ, і він працюватиме без будь-якого посилання на домен.

Потім генерується ключ API, це ключ, який потрібно скопіювати, щоб додати до My Maps location.

Додайте ключ до My Maps Location.

У розділі Компоненти > My Maps Location > Параметри можна додати ключ до конфігурації.

Вставте ключ.

Покрокове резюме:

Отже, кроки, яких я дотримуюся, такі

• Перейдіть до консолі API Google
• Створити або вибрати проект
• Натисніть « Продовжити» , щоб увімкнути API та будь-які пов’язані служби
• На сторінці «Облікові дані» отримайте ключ браузера (і встановіть облікові дані API)
• Щоб запобігти крадіжці квот, захистіть свій ключ API, дотримуючись цих найкращих практик

2. Керування категоріями розташування

Розташування класифікуються за категоріями. Ці категорії можна відображати як фільтр у фронтенді або використовувати як попередньо визначений параметр у пункті меню для завантаження деяких категоризованих розташувань.
 

Якщо у вас багато локацій, рекомендується використовувати категорії. Ви можете створювати категорії та підкатегорії.
Щоб створити категорію, перейдіть до My Maps location > «Категорія» та натисніть «Нова».

Потім на екрані категорій вам потрібно буде додати назву та батьківську категорію, якщо ви хочете створити підкатегорію

Ви також можете визначити маркер за замовчуванням для розташування в категорії за допомогою вкладки Вибір маркера

3. Створіть місцезнаходження

Щоб створити місцезнаходження, перейдіть до My Maps location > Місця > Нове

Є 3 обов'язкових поля:

• Назва місця розташування
• Категорія місця розташування
• Відомості про місцезнаходження (адреса)      

Для адреси, яку ви отримали, є 3 рішення для її додавання:

• Використайте поле пошуку (рекомендовано)
• Перейдіть на карту та вкажіть місцезнаходження за допомогою курсора
• Введіть адресу (має бути актуальною на Картах Google)

Щоб додати місцезнаходження за допомогою пошукової системи, введіть назву місця, яке ви хочете додати.

Після вибору поля широти та довготи будуть заповнені автоматично. Мої карти також інтегровані з Google Places! Це означає, що ви можете шукати магазин або будь-що інше, зареєстроване на Google Maps, наш компонент отримає всю інформацію про місце.

Ви також можете переміщатися по карті та ставити маркер безпосередньо, результат буде таким самим, і ви отримаєте автоматично заповнені широту та довготу.

Будьте уважні з полем адреси та поштовим індексом, якщо ви заповнюєте його вручну, він має збігатися з відомою адресою на Картах Google.

Вся інша інформація про місцезнаходження (опис, години роботи тощо) відображається в детальному вигляді місця розташування.

Контактне посилання в редакції деталей розташування – це можливість додати контактне посилання, адресу електронної пошти або URL-адресу для кожного розташування. На інтерфейсі буде кнопка контакту, яка відкриватиме URL-адресу або виконуватиме дію "надіслати адресу".

4. Інша інформація про місцезнаходження

На кожне місце можна додати зображення та маркер. 

• Зображення місцезнаходження: Зображення відображатиметься як мініатюра в підказці місця розташування та у більшому розмірі на сторінці з детальною інформацією про місцезнаходження.
• Використати значок категорії: Використати значок, який ви вставили в поле категорії моїх розташувань на карті
• Фон маркера: виберіть колір фону маркера
• Маркер відображатиметься на карті як значок маркера місцезнаходження. Ви також отримали кілька гарних наборів маркерів для ваших місцезнаходжень, включених до My Maps Location .
• Використання власного посилання замінить посилання на деталі місцезнаходження власною URL-адресою.

My Maps location використовує вбудовану багатомовну функцію Joomla. Ви можете визначити мову в категоріях місцезнаходження та в місцях розташування. Після перемикання мови місця розташування будуть відфільтровані, як і будь-який інший контент Joomla, щоб відображати контент, затверджений мовою.

Поле опису місця розташування є одним з найважливіших.
Воно відображатиметься на сторінці з детальною інформацією про місце розташування та, залежно від теми, як вступний текст місця розташування в результатах пошуку. Що ще важливіше, опис — це WYSIWYG-редактор з усіма завантаженими плагінами, це означає, що ви можете розмістити в ньому все, що забажаєте (зображення, відео...).

Ось вступний текст, який відображається в результатах пошуку місцезнаходження.

Поле тегу має ту саму систему тегів, що й у Joomla. Ви можете додавати теги та підтеги, а потім завантажувати їх у фронтенд як фільтр. Щоб керувати всіма тегами, просто завантажте компонент тегів Joomla: Меню компонентів > Теги.
На фронтенді, залежно від конфігурації, теги можуть відображатися як прапорець (як показано нижче) або як випадаючий список.

My Maps Location було отримано додаткові поля для заповнення метаданої інформації (для пошукових систем). Ці поля завантажуються на сторінці з детальною інформацією про місцезнаходження.

5. Відображення місцезнаходжень на фронтенді

Щоб відобразити свої місця розташування на фронтенді, ви можете використовувати:

• Меню для відображення пошукової системи місцезнаходження, окремого місця розташування або категорії місць розташування
• Модуль для відображення поля пошуку або вибору набору місцезнаходжень
• Кнопка редактора для відображення одного або кількох місць розташування в будь-якому редакторі

Завантаження місцезнаходжень з меню

У менеджері меню Joomla додайте елемент і виберіть тип «Пошук та відображення місцезнаходження». Це відобразить пошукову систему місцезнаходження з фільтрами.
Виберіть «Детальний перегляд місцезнаходження», щоб відобразити одне попередньо визначене місцезнаходження.

З головної вкладки меню ви можете налаштувати:

• Введіть адресу: ви можете примусово відображати адресу за замовчуванням під час завантаження сторінки. Це поле можна залишити порожнім.
• Відстань: відстань до пошуку блокування, з урахуванням адреси вище. Можна залишити значення -1 (за замовчуванням).
• Категорія: завантажити певну категорію місцезнаходження
• Обмеження пошуку: обмежує кількість результатів пошуку. 10 поверне лише перші 10 результатів пошуку за місцем розташування.
• Упорядкування: упорядкування результатів пошуку за датою, назвою, відстанню (за замовчуванням)

Потім на вкладці меню My Maps Location ви можете налаштувати:

• Виберіть компонент: My Maps Location або вся інтеграція зі сторонніми розробниками, як-от K2, Jomsocial ...
• Ідентифікатор категорії за замовчуванням (сторонішні розширення): категорія за замовчуванням, яка завантажується, коли використовується стороннє розширення, таке як K2, Hikashop або Adsmanager, ідентифікатор списку CB для конструктора спільноти
• Розташування дочірніх категорій: Відображати також як результати пошуку розташування з підкатегорій, а не лише з вибраної вище
• Тема: виберіть одну з 3 тем за замовчуванням, повноширинну та бічну панель пошуку та відображення результатів, доступних для елемента меню.
• Постачальник карт: виберіть Карти Google, Карти Bing, Mapbox, OpenStreetMap, Baidu або Mapquest, щоб стилізувати свої Карти
• Увімкнути теги пошуку : дозволяє виконувати пошукові запити за допомогою назв тегів місцезнаходження
• Дизайн: Залежно від джерела карти, у вас є кілька типів та кольорів карти
• Шар карти: Додайте деякі дані (шар) до своїх карт. Є шар KML, шар дорожнього руху, шар громадського транспорту та шар велосипедів.
• URL-адреса шару карти Google: Використовуйте шар даних для зберігання власних даних або для відображення даних GeoJSON на карті Google
• Тип Карт Bing: Якщо постачальником карт є Карти Bing, виберіть зовнішній вигляд і дані Карт Bing.
• Тип OpenStreetMap: Якщо вашим постачальником карт є OpenStreetMap, ви можете додати деякі дані (шар) до своїх карт
• Підказка про місцезнаходження: під час завантаження карти автоматично відкривати підказку про місцезнаходження після пошуку місцезнаходження
• Масштаб карти: Визначення рівня масштабування карти за замовчуванням
• Параметри ширини та висоти карти та результатів пошуку

Фронтенд-відображення на основі теми

Результат пошуку для одного місця розташування:

Відображення місцезнаходжень за допомогою модуля

My maps location постачається з 2 модулями для рідних локацій + іншим для інтеграції зі сторонніми розробниками (наприклад, модулем для відображення розташування предметів K2)

Модуль «Карта» дозволяє відображати ваші місця розташування з тими ж фільтрами, що й меню, але в окремій позиції модуля. Місця розташування будуть відображатися у вигляді карти або списку. Ви можете вибрати набір місць розташування або вибрати категорії місць розташування.

My Maps Location – Модуль пошуку відображатиме пошукову систему з деякими фільтрами як опціями, такими як ширина карти або компонент, у якому буде шукатися місцезнаходження (пошук розташування K2 лише для axample).

Модуль відображення на фронтенді:

Відображення місцезнаходжень за допомогою кнопки редактора

Кнопка редактора буде завантажена у ваш редактор Joomla (зазвичай у статтях або користувацьких модулях HTML). Ви побачите кнопку внизу редактора.
Після натискання ви побачите лайтбокс, який дозволить вам вибрати одне або кілька місць, які ви додали раніше.

Потім ви можете вибрати одне або декілька місць розташування та натиснути кнопку, щоб додати їх до своєї статті. Якщо ви не вкажете рівень масштабування, воно буде автоматично завантажено відповідно до області вашого розташування.
Код тегу, який ви побачите у своєму WYSIWYG-редакторі, буде виглядати так: {mymaplocations mapid width height}

Наприклад: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} цей код відобразить карту з ідентифікатором місцезнаходження = 1, з шириною 58%, висотою 400px, 10-кратним масштабуванням та шрифтом Google. Використовуйте кому для додавання кількох місць на карту. Наприклад: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} з ідентифікаторами місцезнаходження = 1, 2, 3.