1. Получите ключ API Google Maps

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

Дополнительная информация: https://developers.google.com/maps/documentation/javascript/usage?hl=en

Первый шаг — создать проект, а затем ввести его название.

Если я хочу разрешить все запросы с моего домена, то следует использовать шаблон *.joomunited.com/*.
Если же вы хотите разрешить запросы только с одного домена, например, mydomain.com, то шаблон будет таким: joomunited.com/*.

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

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

Добавьте ключ к My Maps Location.

В разделе «Компоненты» > My Maps Location > «Параметры» можно добавить ключ в конфигурацию.

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

Пошаговое резюме:

Итак, шаги, которые я выполняю, следующие:

• Перейдите в консоль Google API
• Создать или выбрать проект
• Нажмите «Продолжить» , чтобы включить API и все связанные с ним сервисы.
• На странице «Учетные данные» получите ключ браузера (и укажите учетные данные API).
• Чтобы предотвратить кражу квот, защитите свой API-ключ, следуя этим рекомендациям.

2. Управление категориями местоположения

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

Если у вас много местоположений, рекомендуется использовать категории. Вы можете создавать категории и подкатегории.
Чтобы создать категорию, перейдите в раздел My Maps location > «Категории» и нажмите «Создать».

Затем на экране категорий вам нужно будет добавить заголовок и родительскую категорию, если вы хотите создать подкатегорию

Также вы можете задать маркер по умолчанию для местоположения в категории, используя вкладку « Выбор маркера».

3. Создайте местоположение

Чтобы создать местоположение, перейдите в раздел My Maps location > «Местоположения» > «Новое».

Есть 3 обязательных поля:

• Название местоположения
• Категория местоположения
• Информация о местоположении (адрес)      

Для добавления адреса есть 3 способа:

• Воспользуйтесь полем поиска (рекомендуется)
• Перейдите на карту и с помощью курсора укажите местоположение
• Введите адрес (он должен соответствовать данным Google Maps)

Чтобы добавить местоположение в поисковую систему, введите название места, которое хотите добавить.

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

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

Будьте внимательны при заполнении поля адреса и почтового индекса вручную: они должны совпадать с известным адресом в Google Maps.

Вся остальная информация о местоположении (описание, часы работы и т. д.) отображается в подробном описании местоположения.

В разделе сведений о местоположении есть ссылка для связи, адрес электронной почты (mailto) или URL-адрес для каждого местоположения. На стороне клиента это будет кнопка «Контакты», которая откроет URL-адрес или выполнит действие, указанное в адресе электронной почты (mailto).

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 Maps, Bing Maps, Mapbox, OpenStreetMap, Baidu или Mapquest для оформления ваших карт.
• Включить поисковые теги : позволяет выполнять поисковые запросы с использованием названий геотегов.
• Дизайн: В зависимости от источника карты доступно несколько типов и цветов.
• Слой карты: добавьте на карту данные (слой). Существуют слои KML, слой трафика, слой общественного транспорта и слой велосипедных маршрутов.
• URL слоя Google Maps: Используйте слой данных для хранения собственных данных или для отображения данных GeoJSON на карте Google.
• Тип Bing Maps: Если Bing Maps является вашим поставщиком карт, выберите внешний вид и данные Bing Maps.
• Тип OpenStreetMap: Если OpenStreetMap является вашим поставщиком карт, вы можете добавить на свои карты данные (слои).
• Всплывающая подсказка о местоположении: При загрузке карты автоматически открывается всплывающая подсказка о местоположении после выполнения поиска местоположения.
• Масштабирование карты: Задайте уровень масштабирования карты по умолчанию.
• Параметры ширины и высоты карты и результатов поиска

Отображение внешнего интерфейса на основе темы

Результаты поиска по одному местоположению:

Отображение местоположений с помощью модуля

В состав My maps location входят 2 модуля для отображения местоположения, а также ещё один модуль для интеграции со сторонними сервисами (например, модуль для отображения местоположения предметов в K2)

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

Модуль «Карта My Maps Location отобразит поисковую систему с некоторыми фильтрами, такими как ширина карты или компонент, в котором будет производиться поиск местоположения (например, поиск только местоположения K2).

Отображаемый модуль на фронтенде:

Отображение местоположений с помощью кнопки редактора

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

Затем вы можете выбрать одно или несколько местоположений и нажать кнопку, чтобы добавить их в свою статью. Если вы не укажете уровень масштабирования, они будут автоматически загружены в соответствии с вашей областью местоположения.
Код тега, который вы увидите в вашем WYSIWYG-редакторе, будет выглядеть примерно так: model: {mymaplocations mapid width height}

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