Как интегрировать карты Google с WordPress?

Если у вас есть физический магазин, было бы здорово, если бы вы могли добавить Google Maps на свой сайт? В этом руководстве вы узнаете, как интегрировать Карты Google с WordPress и максимально эффективно использовать свой веб-сайт.

В таком взаимосвязанном мире Google была одной из крупнейших империй, заявивших о себе повсюду. Среди многочисленных утилит, которые мы используем каждый день, таких как Gmail, Google Drive или Google Search, Google Maps заслужили репутацию одного из самых полезных веб-картографических сервисов всех времен. Запущенный в 2005 году, этот навигационный инструмент, разработанный Google, предлагает пользователям различные варианты выбора, включая спутниковые изображения, аэрофотосъемку, карты улиц и условия дорожного движения в реальном времени. Неудивительно, что в 2020 году Картами Google ежемесячно пользуются более 1 миллиарда граждан мира.

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

Зачем добавлять карты Google на свой сайт?

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

• Данные не лгут: из всех людей, использующих навигационные приложения на смартфонах, 67% пользуются Google Maps. Остальные 33% распределяются между 3 другими приложениями, на каждое из которых приходится лишь небольшой процент. Согласно опросу, основная причина, по которой люди выбирают Google Maps в качестве предпочтительного навигационного приложения, — это четкие указания, на которые приходится 25%.
• Улучшите локальное SEO: встраивание Google Maps на ваш сайт дает вам преимущество с точки зрения SEO. Проще говоря, если, например, на веб-сайте вашего цветочного магазина есть карта, люди, выполняющие поиск по ключевому слову «цветок», могут увидеть ваш веб-сайт в результатах поиска.
• Скорость : ни одна другая компания не может сравниться со скоростью сервисов Google. Этот технологический гигант наделяет огромной мощью все свои утилиты, включая Google Maps. Таким образом, если вы используете карту своего веб-сайта в Google, вы получите самое быстрое время загрузки, которое когда-либо было на любой карте.

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

Как подключить карты Google к WordPress

Существует 3 основных способа подключения Google Maps к WordPress :

1. Встроить карты Google вручную
2. Через виджеты
3. С плагинами

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

1. Встроить Карты Google в WordPress вручную

Это самый простой и быстрый способ интеграции Google Maps с WordPress. Несмотря на то, что с помощью этого метода довольно легко отобразить карту на вашем веб-сайте, вам потребуются базовые знания HTML и Javascript, чтобы настроить ее по своему вкусу. Итак, если вы уверены в своих навыках работы с HTML или вам просто нужна базовая карта без каких-либо настроек, этот метод — отличный вариант для вас.

Шаг 1. Перейдите на Google Карты.

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

Например, если место, которое вы хотите отобразить, — Таймс-сквер в Нью-Йорке, и вы хотите показать вид со спутника, все, что вам нужно сделать, это нажать «Поделиться » .

Шаг 2. Получите HTML-код.

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

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

Шаг 3: Вставьте код на свою страницу/публикацию

Получив HTML-код, перейдите в панель администратора WordPress и решите, куда встроить карту. В нашем примере мы вставим код в новый пост. Итак, мы нажмем « Добавить новый » и перейдем к интерфейсу настройщика. В зависимости от вашего компоновщика страниц вы можете увидеть другой вид экрана, но параметры будут схожими. Здесь мы назовем сообщение и вставим карту в доступный блок.

Затем мы должны опубликовать пост, и вот что мы получаем:

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

2. Встраивайте Карты Google в WordPress с помощью виджетов

Использование виджетов — еще одна простая практика для отображения Карт Google на вашем веб-сайте WordPress. Виджеты популярны, потому что они удобны и просты в использовании. Однако обратите внимание, что есть и обратная сторона. Виджеты могут появляться только в определенных областях вашего сайта, обычно в нижних колонтитулах и боковых панелях, в зависимости от используемой вами темы. Это также означает, что вы не можете вставлять карту на свои страницы/сообщения.

Итак, если вы хотите отобразить карту в нижнем колонтитуле или на боковой панели, вот как это сделать.

Шаг 1. Установите и активируйте плагин виджета Google Maps

Для этого метода вам необходимо загрузить и установить плагин Google Maps Widget. После этого перейдите в панель администратора WordPress > Плагины > Добавить новый . Затем загрузите только что загруженный ZIP -файл и активируйте его. Если вы все сделали правильно, вы получите благодарственное письмо от плагина.

Шаг 2. Получите ключ API от Google Maps

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

Затем скопируйте только что созданный ключ API.

Теперь вернитесь на страницу настроек плагина Google Maps Widget, вставьте ключ API и нажмите кнопку « Сохранить ».

Шаг 3. Отобразите Карты Google.

Затем перейдите в раздел « Внешний вид» > «Виджеты», найдите виджет Google Maps, поместите его в нужное место и нажмите « Добавить виджет ».

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

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

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

3. Интегрируйте Карты Google с WordPress с помощью плагинов.

Два предыдущих метода — отличные варианты для отображения местоположения вашего бизнеса или любого статического местоположения. Однако, если карты играют важную роль на вашем сайте WordPress или вам нужно включить несколько карт в один пост/страницу, тогда плагины — лучший выбор. Чтобы помочь интегрировать Карты Google с WordPress с помощью плагинов, многие разработчики присоединились к гонке. В этой теме мы познакомим вас с MapPress Maps для WordPress, одним из лучших инструментов для этой цели.

Итак, чтобы добавить Google Maps на свой сайт WordPress с помощью плагинов, вам необходимо:

Шаг 1. Установите и активируйте плагин MapPress Maps для WordPress.

Загрузите плагин MapPress Maps for WordPress бесплатно на свой ПК/ноутбук, а затем активируйте его.

Шаг 2. Добавьте новые сообщения с картами

После этого добавьте новый пост/страницу из панели администратора WordPress. Вы также можете отредактировать опубликованные сообщения, чтобы добавить карту. Закончив заголовки и содержание сообщения, прокрутите вниз, чтобы увидеть, что может сделать MapPress.

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

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

У MapPress также есть профессиональная версия, которая стоит от 49,95 долларов США и включает в себя мэшап-карты, виджеты, пользовательские значки маркеров и другие функции. Однако, если вы просто хотите добавить интерактивные карты Google на свой сайт, бесплатной версии должно быть достаточно.

Вывод

В заключение, добавление Google Maps на ваш веб-сайт WordPress принесет много пользы вашему бизнесу, от предоставления полезного инструмента вашим пользователям до улучшения результатов SEO. Однако, поскольку существует несколько доступных методов, какой из них выбрать?

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

Наконец, если вы хотите повысить свою производительность и максимально эффективно использовать свой сайт, вы можете ознакомиться с некоторыми из наших руководств:

• Как интегрировать свой сайт с Календарем Google
• Встраивайте доски и карточки Trello в WordPress
• Как встроить Calendly в WordPress?
• Подключите Eventbrite к WordPress

У вас есть вопросы о том, как интегрировать Карты Google с вашим сайтом WordPress? Не стесняйтесь писать нам в комментариях ниже!