На днях мы завершили работу над сайтом для сети кофеен, где выступали в роли подрядчика, выполняющего работу по верстке и всей программной части проекта.
В рамках этой работы было сделано много интересных моментов, включая интернет-магазин, реализованный на базе Битрикс редакции Старт. Но больше всего запомнилась задача реализовать интерактивную карту сети кофеен, сделанную с помощью Google Maps. Об этом чуть подробнее расскажем в данной статье.
Ранее мы уже делали нечто похожее. На сайте другого клиента, тоже кстати для компании из кофейной отрасли, надо было разместить в фоне страницы с контактами карту Google в стильном сером цвете и отметкой на ней адреса фирмы. Для этой задачи хорошо подошел сервис snazzymaps.com. С его помощью можно легко сделать карту в разных стилистических оформлениях, которые просто выбираем из представленного каталога. Вариаций огромное множество, исчисляемое тысячами.
Для работы с данным сервисом необходимо пройти простую регистрацию и вам будет доступен пошаговый конструктор карты. Сначала выбираем стиль, далее определяем центральную локацию карты, где будем отмечать точки. Устанавливать маркеры на карту можно в разном виде и размерах, в том числе загружать свои иконки меток, что очень удобно для брендирования и классно выглядит на сайте клиента. На последнем шаге можно выбрать различные настройки связанные с управлением карты. Например, добавить кнопку включения режима Спутник и выбрать ее расположение, или отключить масштабирование колесиком мышки, что часто требуется, если карту размещают в виде фона.
Когда карта создана, для ее публикации на сайте обязательно потребуется Google Maps API Key. Тут есть свои особенности, которые появились с июля 2018 года. Ранее можно было просто получить ключ и использовать его. Но правила работы с сервисом обновились и для получения такого ключа потребуется пройти чуть более сложную регистрацию, включающую подключение вашей банковской карты. В рамках бесплатного использования на момент написания данной статьи выделяется по 200$ ежемесячно, что сопоставимо примерно с 28 000 запросами. То есть такое количество запросов по вашему ключу можно делать бесплатно. Если же количество запросов превысит эту сумму, то по итогам месяца вам будет выставлен счет за пользование сверх лимита.
Для тех, кто не очень понимает, что такое запрос – это каждое обращение с вашего сайта к карте Google. Например, клиент открыл страницу вашего сайта с контактами, где размещена карта, это один запрос. Обновил эту же страницу еще раз – еще один запрос.
Вернемся к нашему новому проекту с более сложной задачей по созданию карты сети кофеен. Прошлый вариант с сервисом snazzymaps.com нам в этот раз не подошел, так как по заданию надо было делать карту динамично загружаемой с фильтрами. Пользователю предоставляется возможность выбирать какие точки сети будут показываться. Для этого он может устанавливать нужный город из списка или менять статус открытия кофейни. При этом важно было учесть возможность в дальнейшем владельцу сайта самому добавлять новые кофейни сети на сайт или менять статус у ранее созданных.
Чтобы это реализовать мы разделили задачу на две составляющие. Первым делом создали сам каталог используя инфоблоки в Битрикс. В каталоге добавляются кофейни и указываются все необходимые данные, включая месторасположение на карте. Когда каталог был создан мы его вывели на нужной странице в соответствии с предоставленным дизайном.
Вторым этапом пошла работа с JavaScript API от Google Maps. Для отображения точек на карте мы собираем все координаты отфильтрованных точек сети и добавляем к этим маркерам нужные свойства в виде фирменной иконки и ссылки на детальную страницу кофейни. А для стилизации карты используем специальное свойство styles, в которое вставляется json массив с набором цветов по элементам. Сам набор мы взяли из документации Google, там есть уже заготовленные наборы и тот, что нам подошел называется Silver.
Еще одним важным моментом, который стоит озвучить, был расчет центровки карты и ее масштаб. Ввиду того, что сеть кофеен была в нескольких городах, то центр карты при фильтрации по городу надо было постоянно смещать и для удобства показывать масштаб города, а не страны.
Для решения этой задачи мы сделали достаточно простую формулу. Из всех отфильтрованных точек мы выбираем самую минимальную и самую максимальную долготу, точно так же с широтой. Далее складываем максимальное значение с минимальным и делим пополам, высчитывая среднее, которое в итоге у нас будет центром карты. С масштабом получилось чуть зауряднее, мы вычитали из максимального значения долготы минимальное и затем из 10 вычитали получившийся результат. При этом если масштаб оставался в значении 10, мы его заменяли на 11, то есть самое максимальное значение приближения.
В итоге все получилось стильно и очень гибко в управлении для владельца сайта, как собственно и весь сайт в итоге.