Как добавить Локатор магазина Google Maps в WordPress

Хотите добавить локатор магазина Google Maps в WordPress? Локатор магазина — это карта, указывающая на местоположение вашей компании.

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

В этой статье мы покажем, как легко добавить локатор магазина Google Maps в WordPress.

Как добавить локатор магазина Google Maps в WordPress

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

Большинство плагинов Google Maps для WordPress используют API Google для получения и отображения карт. Если вы хотите использовать плагин Google Maps, то вам нужно будет зарегистрироваться на платформе Google API и включить опцию выставления счетов.

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

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

Способ 1. Добавление Google Maps на ваш сайт бесплатно

Этот метод проще и бесплатнее. Недостатком является то, что вы не можете показать несколько магазинов на одной карте.

Рекомендуется для пользователей, которые просто хотят добавить одно местоположение магазина Google Maps на своем веб-сайте.

Во-первых, вам нужно зайти на сайт Google Maps на вашем компьютере. Затем введите адрес вашего магазина в поле поиска, и Google Maps покажет его на карте с закрепленным маркером на карте.

Совместное использование карты в Google Maps

Убедитесь, что маркер расположен в правильном месте. Вы можете выбрать уровень масштабирования, нажав кнопку масштабирования. Как только вы довольны уровнем масштабирования, вам нужно нажать на кнопку «Поделиться» в левом столбце.

Появится всплывающее окно, в котором вам нужно перейти на вкладку «Вставить карту». Теперь вы увидите искомое местоположение на карте с HTML-кодом.

Скопируйте код встраивания Google Maps

Нажмите на ссылку Копировать HTML, чтобы получить код для встраивания.

Теперь зайдите в админку вашего сайта WordPress. Оказавшись в административной области, продолжайте редактировать пост или страницу, где вы хотите отобразить карту расположения магазина.

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

На экране редактирования сообщения вам нужно добавить пользовательский блок HTML.

Добавление пользовательского блока HTML в WordPress

В текстовой области пользовательского блока HTML вам нужно вставить код, скопированный из Карт Google.

Карты встраивают код в WordPress

Теперь вы можете переключиться на вкладку предварительного просмотра, чтобы увидеть Google Maps, встроенные в вашу страницу. Он покажет местоположение вашего магазина, отмеченное на карте со ссылками на направления или сохранить местоположение.

Расположение магазина обозначено на карте

Способ 2. Добавление локатора магазина Google Maps с помощью плагина WordPress

Этот метод рекомендуется для пользователей, которые хотят показывать несколько магазинов на карте Google.

Первое, что вам нужно сделать, это установить и активировать плагин WP Store Locator. Для более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

Это бесплатный плагин Google Maps, который позволяет создавать пользовательские карты с несколькими местоположениями магазинов и настраиваемыми полями.

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

Готов, давайте начнем.

Шаг 1. Генерация ключей API Карт Google

Чтобы использовать плагин WP Store Locator, вам нужно сгенерировать два API-ключа. Первый называется ключом браузера API, а второй называется ключом сервера.

Давайте начнем с ключа браузера. Нажмите на эту ссылку консоли разработчика Google, и вы попадете на веб-сайт API Google со всеми необходимыми API-интерфейсами.

Создать новый проект

Вам нужно создать новый проект и дать ему имя, которое поможет вам идентифицировать проект. После этого вам придется подождать несколько секунд, пока консоль создаст проект для вас.

Далее вы будете перенаправлены на страницу конфигурации ключа API. Вам необходимо указать заголовок для своего API-ключа, чтобы вы могли легко определить его как API-ключ браузера для вашего проекта Google Maps.

Настройки API-интерфейса браузера

Затем необходимо установить для «Ограничения приложений» значение «HTTP Referrers». Ниже вам необходимо установить в поле «Принимать запросы от» свое доменное имя в следующем формате.

https://example.com/*
https: //*.example.com/* (если вы используете поддомен)

Наконец, нажмите кнопку «Создать». Теперь консоль сохранит ваши настройки и покажет вам ключ браузера. Вам нужно скопировать и вставить этот ключ в текстовом редакторе, он понадобится вам позже.

Скопируйте браузер API-ключ

Далее необходимо создать ключ API сервера. Нажмите на эту ссылку Google Developer Console, и она приведет вас прямо к консоли с включенными выбранными API.

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

Выберите свой проект Google Maps

Вы будете перенаправлены на страницу конфигурации API. Укажите имя для этого ключа API, которое поможет вам распознать его как ключ сервера.

Установить ограничения IP

В разделе «Ограничения приложений» необходимо выбрать IP-адреса. По сути, мы говорим Google принимать запросы от серверов только с определенных IP-адресов.

Теперь вам нужно будет попросить вашего провайдера WordPress сообщить вам диапазон IP-адресов, используемый вашей учетной записью хостинга. Это будет в следующем формате:

172.16.0.0/12

После этого вам нужно нажать на кнопку «Создать», чтобы сохранить настройки и скопировать ключ API сервера.

Шаг 2. Настройка плагина WP Store Locator

После того как вы создали свои ключи API, вам нужно перейти к Магазин Локатор »Настройки страница для настройки плагина.

Введите ключи Google Maps

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

Теперь вам нужно прокрутить страницу настроек вниз до раздела «Карта» и указать начальную точку карты. Эта начальная точка может быть городом или страной, поэтому пользователи могут видеть маркеры, размещенные в разных местах.

Добавьте начальную точку для карты вашего магазина

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

Как только вы закончите, пришло время добавить места.

Шаг 3. Добавление местоположений магазина

Направляйтесь к Магазин Локатор »Новый Магазин страница, чтобы добавить свое первое местоположение. Страница «Новое хранилище» будет выглядеть так же, как стандартная запись или редактор страниц в WordPress.

Адрес магазина

Укажите название вашего магазина, а затем прокрутите вниз до раздела «Сведения о магазине». Отсюда вам необходимо ввести адрес вашего магазина.

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

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

Шаг 4. Добавление карты локатора магазина в WordPress

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

На экране редактирования записи вам необходимо добавить блок «Шорткод» в область редактирования сообщения. После этого добавьте [wpls] короткий код внутри него.

Магазинный шорткод

Теперь вы можете сохранить или опубликовать свою страницу и нажать кнопку предварительного просмотра, чтобы увидеть локатор магазина Google Maps в действии.

Предварительный просмотр карты магазина

Он покажет маркеры вашей карты для каждого местоположения магазина и запустит карту с вашей предпочтительной начальной точки. Например, на этой карте он сфокусирован на городе Уэст-Палм-Бич и показывает два местоположения магазинов на карте.

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

Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас на щебет и фейсбук.

Пост Как добавить локатор магазина Google Maps в WordPress впервые появился на WPBeginner.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.