Интерактивная карта Google с множеством маркеров, как сделать фильтрацию?

Question

[Сергей Коноваленко]

Подскажите, пожалуйста, как в целом реализуется такая возможность, если есть много маркеров на карте Google и чтобы пользователь мог в селекте выбрать и открыть нужный ему регион с маркерами, которые в нем доступны. А также чтобы была возможность сортировки маркеров. Вот примерный вариант: https://www.cerva.com/ru/sellers

Как такое в целом делается, есть ли готовые для этого плагины?

Answer 1

[Сергей]

Всё делается руками с помощью Google Maps JavaScript API.

Comments

[Сергей Коноваленко]

Сергей, если не сложно, можете подсказать раздел API в котором это описано, а то там столько всего...?

[Сергей]

В основном, вам нужен раздел касательно меток, в частности, метод setMap либо setVisible, которые служат для установки/удаления маркеров с карты. Вам следует понять, что сама сортировка меток никак не связана с Google Maps API, она делается на обычном ванильном javascript (либо на js-библиотеке, напр., JQuery). От Google Maps API там только использование вышеприведённых методов setMap или setVisible. Вот, как это делал я в одном из своих проектов. Возможно, не самая лучшая реализация, но вполне рабочая.

[Сергей Коноваленко]

Сергей, спасибо, мне тоже примерно такое же нужно сделать.
Хотел еще спросить, вы это делали без каких-либо плагинов для CMS?
И делали ли возможность клиенту самому через админку добавлять новые адреса магазинов с маркерами на карту?

[Сергей]

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

[Сергей Коноваленко]

Сергей, спасибо большое, я тоже на фронтенде больше специализируюсь

[Сергей]

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

[Сергей Коноваленко]

Сергей, да, я видел, на главную страницу тоже заходил

[Сергей Коноваленко]

Сергей, спасибо, благодаря твоему примеру и API мне удалось сделать сортировку маркеров, очень мне помог. Хотел спросить, у тебя адреса магазинов и другая информация о них изначально была в PHP массиве, а как именно ты этот PHP массив передал во фронтенд уже как JS массив объектов, можешь показать пример кода?

[Сергей]

Мы делали магазин на движке ModX. Использовалась связка pdoResources (pdoTools) + MIGX. Благодаря этим расширениям стало возможным добавлять магазины через поля админки:

Можно всю информацию хранить в JSON-файле, а потом импортировать его.

[Сергей Коноваленко]

Понял, спасибо, я на WordPress делаю, буду тогда через JSON выводить