Руководство
Недавно я добавлял в один из своих проектов Rails функцию, позволяющую пользователю вводить местоположение и получать список пивоварен с интерактивной картой. Google Maps API, очевидно, является популярным выбором для этого, но я был удивлен, увидев, что в Интернете не так много ресурсов для включения его в приложение Rails. Чтобы исправить это, давайте посмотрим, как можно создавать собственные карты с помощью этого руководства.
Настраивать
Прежде всего, давайте настроим пространство, в котором будет находиться карта. В представлении файл создайте раздел для карты. Дайте ему простой идентификатор, например «карта».
Зарегистрируйтесь в Google Maps JavaScript API. Получив ключ API, поместите его в файл .env. Убедитесь, что этот файл объявлен в .gitignore, чтобы не отправить свой ключ на Github!
Вам понадобятся широта и долгота для каждого местоположения, чтобы добавить его в API Карт Google. Я рекомендую использовать для этого гем Geocoder.
Он может конвертировать адреса улиц в координаты, которые затем можно сохранить в ваших моделях. Последней частью настройки является создание файла JavaScript.
Если вы используете Rails 6, он должен идти в app/javascript/packs. В Rails 7 он должен находиться в каталоге app/javascript. Назовите файл map.js.
Передача координат
Данные широты и долготы нужно будет передать с нашей страницы Rails в файл JavaScript, чтобы создать карту и маркеры внутри. Поскольку мы создаем карту, которая меняется в зависимости от ввода пользователя, нам нужно будет найти способ отправлять данные о местоположении в наш код JavaScript, который затем отправляется в API Карт Google для создания карты. Для этого отобразите результаты поиска на странице просмотра и добавьте теги данных к каждому элементу с координатами.
Каждая пивоварня, отображаемая в списке, имеет свои координаты в теге <li> как data-latitude и data-longitude. Город, в котором расположены пивоварни, имеет координаты в <div> с идентификатором «пивоварни».
Таким образом, информация является частью DOM и может быть доступна нашему коду JavaScript.
Код JavaScript
В файле map.js у нас будет одна функция, которая создает карту, получает координаты со страницы и добавляет на карту маркеры с этими координатами. Позиция центра карты (в данном случае город) должна быть обозначена и зависит от вас, как вы получите эти координаты (опять же, Геокодер полезен для этого).
Для краткости будем считать, что у вас уже есть эта информация.
Функция захватит координаты города и использует их в качестве центральной позиции при создании карты. Затем он возьмет каждый элемент списка пивоварен и переберет их, получит их координаты и создаст маркеры для размещения на карте, чтобы обозначить положение каждой пивоварни. Теперь, когда все это готово, мы готовы вызывать API Карт Google в представлении!
Создание карты
Единственное, что осталось сделать сейчас, это настроить наше представление так, чтобы API Карт Google вызывался и использовал наш код JavaScript для построения карты. Наш файл map.js можно сделать доступным с помощью помощника Rails. Они различаются в зависимости от того, используете ли вы Rails 6 или 7.
Рельсы 6: javascript_pack_tag 'map'
Рельсы 7: javascript_import_module_tag 'map'
Мы поместим это в представление. Вызов API Карт Google выполняется с использованием тега <script>. Для этого также есть помощник Rails:
Теперь, когда оба помощника установлены, ваше представление должно выглядеть примерно так:
Вызывается API Карт Google, который принимает функцию JavaScript initMap в качестве обратного вызова, который предоставляет ему информацию, необходимую для создания карты и маркеров. Обратите внимание, что мы используем атрибут defer.
Поскольку мы полагаемся на наборы данных на странице для получения наших координат, мы должны убедиться, что содержимое DOM загружено до вызова нашей функции. Атрибут defer будет ждать, пока HTML не будет собран, прежде чем вызывать API и использовать функцию initMap. Теперь карта будет построена и помещена в <div id="map"> .
Теперь у вас есть полностью динамическая карта в вашем приложении Rails. Надеюсь, вы нашли это руководство полезным. Оставайтесь в безопасности и будьте здоровы там!
