Как легко добавить поиск местоположения на веб-сайт каталога в WordPress

Существует множество различных способов улучшить ваш веб-сайт каталога, и один из них — включить поиск по местоположению. Если вы используете веб-сайт каталогов или объявлений, похожий на Yelp, TripAdvisor, Craigslist или любой другой подобный, требующий поиска на основе местоположения, вы можете легко сделать это, интегрировав его с Google Maps. Это важная функция для некоторых пользователей, поскольку они могут искать товары, услуги или места в своем районе. Кроме того, на платформе Google Maps есть бесплатный месячный лимит, которого должно быть достаточно, если ваш сайт получает умеренный трафик.

В этом пошаговом руководстве мы объясним, как добавить поиск по местоположению на веб-сайт каталога. Мы собираемся использовать HivePress, бесплатный плагин WordPress, который позволяет вам создать веб-сайт каталога в мгновение ока. Кроме того, будет использоваться ListingHive, бесплатная тема каталога WordPress, вместе с расширением геолокации HivePress для интеграции с Google Maps.

Однако, если у вас уже есть веб-сайт-каталог, созданный с помощью другого плагина или темы, вы можете пропустить первые шаги и перейти к разделу «Как исправить». Упс! Что-то пошло не так. Эта страница неправильно загрузила Карты Google » » раздел, посвященный устранению наиболее распространенных ошибок.

Итак, переходим к первому шагу!

Установка ХайвПресс

Прежде всего, вам нужно установить HivePress. Вы можете установить его как любой другой бесплатный плагин в WordPress. Просто перейдите в раздел « Плагины» > «Добавить новый » и найдите его с помощью панели поиска, затем установите и, наконец, активируйте, нажав кнопку «Активировать». Когда вы закончите установку, вы можете перейти к следующему шагу — установке расширений.

Кроме того, если вам это сложно, вы можете просмотреть приведенный ниже скринкаст, чтобы установить HivePress прямо с панели управления WordPress.

Установка расширений

Следующим шагом является установка расширения геолокации, чтобы пользователи могли искать объявления по местоположению. Чтобы установить его, просто наведите указатель мыши на раздел HivePress и нажмите ссылку «Расширения». Найдите в списке расширение Geolocation, нажмите кнопку «Установить» и, наконец, активируйте расширение.

Кроме того, в следующем скринкасте показан общий процесс установки расширений HivePress, поэтому вы можете следовать ему шаг за шагом.

Создание нового проекта

После того, как вы закончите установку плагина и расширения Geolocation, пришло время создать проект на Google Cloud Platform. Предполагая, что у вас уже есть учетная запись Google, вы сможете без проблем получить доступ к этой панели. Однако, если у вас его нет, необходимо зарегистрировать учетную запись Google.

Теперь вам нужно создать проект, нажав кнопку «Создать проект», затем назвать его и, наконец, нажать кнопку «Создать».

Настройка выставления счетов

Теперь, если у вас нет платежной учетной записи в Google, вам необходимо создать новую, чтобы включить выставление счетов по проекту. Но не волнуйтесь, теперь вам не нужно ничего платить, это всего лишь одно из требований для использования Google Maps API. Просто перейдите по ссылке и заполните все поля формы, включая сведения о способе оплаты.

Каждый месяц вы будете получать бесплатный кредит в размере 200 долларов США, и в большинстве случаев этого более чем достаточно для покрытия расходов на использование сервисов Google на вашем веб-сайте. Кроме того, можно установить ограничения и уведомления, чтобы вы никогда не превышали бесплатный кредит. Вы можете проверить цены, чтобы лучше понять, как это работает, и убедиться, что вы можете использовать карты бесплатно.

После того, как вы добавите свою платежную информацию, вы получите всплывающее окно с типами API, которые вы хотите включить. Выберите «Карты и места», как на скриншоте ниже, и нажмите кнопку «Включить». Кроме того, если всплывающего окна нет, вы можете включить эти API на странице библиотеки API Google.

Создание ключа API

Следующим шагом будет создание ключа API для вашего сайта. Для этого перейдите на страницу Credentials и выберите свой проект.

На странице учетных данных вы можете увидеть уже сгенерированный ключ API. Если вы только что создали свой платежный аккаунт, ключ может быть сгенерирован автоматически. В этом случае вы можете просто нажать на него для редактирования. Однако, если на странице нет ключа API, вы можете создать новый в разделе « Создать учетные данные» > «Ключ API ».

Затем вам нужно настроить свой ключ API, установив ограничения приложения. Это важно, потому что если вы просто вставите ключ, он будет отображаться в виде обычного текста в исходном коде вашего сайта. Вот почему вам нужно ограничить это, чтобы другие люди не могли использовать ваш ключ API для своих проектов. Для этого просто добавьте реферер HTTP, чтобы разрешить запросы API только с вашего веб-сайта. Просто укажите адрес своего веб-сайта, а также добавьте часть «/*» в конце, чтобы разрешить запросы API с любой из подстраниц веб-сайта, чтобы Карты Google работали на всех страницах вашего веб-сайта.

Теперь вам нужно установить ограничения API в следующем поле. Нажмите кнопку « Ограничить » и выберите в раскрывающемся меню Maps JavaScript API, Places API, Geocoding API . Если некоторые из упомянутых API отсутствуют в списке, вам необходимо сначала включить их на странице Maps API Library. После того, как все три API Google включены и выбраны в раскрывающемся меню, нажмите кнопку «Сохранить».

Включение интеграции с Google Картами

Вот и все! Вы только что создали ключ API, и последний штрих — включить Карты Google на вашем веб-сайте. Прежде всего скопируйте ключ API на странице APIs & Services > Credentials . Теперь, если вы используете плагин HivePress, перейдите на панель инструментов WordPress и перейдите в раздел HivePress > Настройки > Интеграции > Карты Google . Затем просто вставьте свой API-ключ в соответствующее поле и нажмите кнопку «Сохранить изменения», чтобы добавить поиск местоположения на свой веб-сайт.

Поздравляю! С этого момента ваш сайт интегрирован с Google Maps, и теперь вы можете добавлять местоположения к существующим объявлениям в разделе « Объявления ». Кроме того, пользователи должны будут указать местоположение для вновь добавленных объявлений. Кроме того, на вашем веб-сайте есть поле поиска местоположения и карта Google, так что вы можете попробовать его и найти некоторые списки по их местоположению.

Поиск проблемы

Если с созданным ключом API возникли какие-либо проблемы, на карте может появиться сообщение «Ой! Что-то пошло не так. Эта страница неправильно загрузила Карты Google» . Это довольно распространенная ошибка, поскольку настройка ключа API не очень удобна для пользователя, и пользователи часто пропускают некоторые этапы настройки. Тем не менее, вы можете исправить это в кратчайшие сроки, если знаете корни проблемы.

Чтобы узнать причину этой ошибки, вам нужно открыть консоль JavaScript. Вы можете открыть его с помощью нескольких нажатий клавиш, которые различаются в зависимости от вашего браузера. Проверьте ответ на StackOverflow, в котором объясняется, как открыть консоль JavaScript. Если вы используете браузер Chrome, вы можете просто нажать CTRL+Shift+I , чтобы открыть его. Как только вы откроете его, вы должны увидеть сообщение об ошибке, что-то вроде этого.

Важно точно знать, что вызывает ошибку, чтобы вы могли ее исправить. Разных ошибок может быть несколько, но мы покажем, как решить самые частые из них:

• ОтсутствуетКейМапОррор;
• ИнвалидКейМапОррор;
• апиноактиватедмаперрор;
• RefererNotAllowedMapError.

Однако, если у вас возникла ошибка, не указанная выше, ознакомьтесь с документацией по сообщениям об ошибках API Карт Google, чтобы узнать, что не так и как ее исправить.

МиссингКеймаперрор

Эта ошибка означает, что ключа API вообще нет, поэтому вам нужно создать его, если вы хотите включить Google Maps на своем веб-сайте. Если вы получили эту ошибку, мы рекомендуем вам следовать этому руководству, начиная с первого шага, чтобы создать ключ API и правильно настроить карты.

ИнвалидКеймаперрор

Эта ошибка появляется, когда вы используете неправильный ключ API. Скорее всего, вы его создали, но неправильно добавили на свой сайт. Чтобы исправить эту ошибку, перейдите на страницу учетных данных и скопируйте ключ API.

Если вы используете плагин HivePress и его расширение для геолокации, перейдите в Панель управления WordPress > HivePress > Настройки > Интеграции > раздел Карты Google , вставьте свой ключ API в соответствующее поле и нажмите кнопку «Сохранить изменения».

Апиноактиватедмаперрор

Если вы получаете ошибку такого типа, это означает, что вы не включили необходимые API. В библиотеке Google Maps API есть много разных API, поэтому вам нужно перейти в библиотеку и включить те, которые необходимы для вашего проекта. После того, как вы включите их, не забудьте также добавить их в раздел «Ограничения API» в настройках вашего ключа API в разделе «Учетные данные».

Например, если вы используете плагин HivePress с его расширением геолокации и хотите добавить поиск местоположения на свой веб-сайт каталога, вам необходимо включить и разрешить доступ к следующим API Google: Maps JavaScript API, Places API, Geocoding API . Вы можете взглянуть на скриншот с необходимыми API.

RefererNotAllowedMapError

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

Хорошей новостью является то, что вы правильно настроили и ввели API-ключ, и вам нужно исправить только одну крошечную деталь. Перейдите на страницу учетных данных и щелкните свой ключ API, чтобы отредактировать его. В разделе «Ограничения приложений» выберите «HTTP-рефереры (веб-сайты)». Затем заполните ограничения веб-сайта, как показано ниже, но замените «пример» на ваше доменное имя и нажмите кнопку «Сохранить». Изменения вступят в силу в течение 5 минут.

Важно добавить часть «/*» в конце, чтобы разрешить запросы API с любой из подстраниц веб-сайта, чтобы Карты Google работали на всех страницах вашего веб-сайта.

Все еще не работает

• Если вы что-то меняете в ограничениях вашего API-ключа — подождите до 5 минут, пока настройки вступят в силу;
• Если ошибка по-прежнему возникает, снова проверьте консоль JavaScript для получения более подробной информации. Может быть ошибка после того, как вы решите первую;
• Также можно попробовать очистить кеш браузера.

Заключение

Вот и все! Говорят, если есть желание, есть способ. Вы только что добавили функцию поиска местоположения на свой веб-сайт каталога, и теперь ваши пользователи могут искать списки по местоположению. Это действительно важная функция для большинства каталогов. Хотя добавление Google Maps может показаться немного сложным процессом, оно того стоит. Как только вы добавите поиск по местоположению на свой веб-сайт, это положительно повлияет на работу пользователей. UX очень важен для любого веб-сайта, поскольку это один из краеугольных камней хорошего трафика.

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

Кроме того, не стесняйтесь проверять наши статьи:

• Самые популярные бесплатные плагины каталогов WordPress
• Лучшие темы каталогов WordPress
• Ошибки, которых следует избегать при создании сайта-каталога WordPress