Интеграция Google Maps с WordPress: с плагином и без

Привет, всем!

Сегодняшней темой моего поста будет как вставить Google Maps в WordPress: с плагином или без него.

По своей работе мне приходиться вставлять Google или Яндекс карты очень часто. И я решил написать пост по внедрению Google Maps на страницу WordPress. Рассмотрим два варианта вставки: вручную и с помощью плагина.

Интеграция Google Maps с WordPress: с плагином и без

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

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

Но вы можете делать это только в том случае, если знаете, как добавить Google Карты в WordPress. Чтобы помочь вам в этом, я покажу вам два разных метода:

  1. Как добавить Карты Google в WordPress без плагина
  2. Как добавить Карты Google в WordPress, используя самый популярный бесплатный плагин WordPress

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

Звучит неплохо? Поехали!

Как встроить Google Maps в WordPress без плагина

Я собираюсь начать с краткого руководства по добавлению Google Maps в WordPress без плагина.

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

Но пока давайте придерживаться ручного метода!

Вот как использовать Google Maps в WordPress au naturel (без плагина).

Шаг 1: Создаtvкарту, которую мы хотим встроить (2 варианта)

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

1.A: Использовать стандартную версию Google Maps Embed

Если вы просто хотите встроить стандартную карту Google Maps, которую вы видите на обычном веб-сайте Google, вам нужно всего лишь:

  • Откройте карту (или направления), которую вы хотите встроить, используя обычный интерфейс Google Maps
  • Нажмите «Поделиться»
  • Выберите «Embed map»
  • Скопируйте код вставки (вы будете использовать это в следующем шаге)

Интеграция Google Maps с WordPress

1.B: использовать Google Мои карты для создания вашей карты

Если вы хотите создать более продвинутую карту с такими вещами, как:

  • Несколько маркеров местоположения
  • Пользовательские заметки, которые вы добавляете
  • Ваши собственные цвета

Затем вы можете использовать Google Мои карты вместо обычного интерфейса Google Maps.

Это инструмент, который использовался для создания карты баров на крыше в Ханое для сайта путешествия:

Интеграция Google Maps с WordPress

Чтобы использовать Google Мои карты, нажмите кнопку «Создать новую карту» после входа в систему:

Интеграция Google Maps с WordPress

Затем создайте карту с помощью интерфейса (у этого видео есть хорошее руководство по различным параметрам интерфейса, если вам нужна помощь).

После того, как вы построили карту, нажмите «Поделиться», а затем «Рядом» с «Частный». Доступ к ней можно получить, нажав кнопку «Изменить»:

Интеграция Google Maps с WordPress

Затем выберите «Вкл.» — публикация в Интернете и нажмите «Сохранить»:

Интеграция Google Maps с WordPress

После того, как вы сделали свою карту открытой, нажмите кнопку с тремя точками и выберите «Вставить на свой сайт»:

Интеграция Google Maps с WordPress

Затем скопируйте код вставки, потому что он понадобится вам в следующем шаге:

Интеграция Google Maps с WordPress

Шаг 2: добавьте код на свой сайт WordPress

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

Затем выберите вкладку «Текст» в редакторе WordPress и вставьте код для вставки:

Интеграция Google Maps с WordPress

Вот и все! Когда вы опубликуете или обновите свой пост, вы должны увидеть его в Google Maps:

Интеграция Google Maps с WordPress

Как создать пользовательские карты Google с помощью плагина WordPress

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

Плагины Google Maps классны, потому что, помимо того, что вы создаете свои собственные Карты Google, они также позволяют вам делать такие вещи, как WordPress:

  • Отображать сообщения или настраиваемые типы сообщений на вашей карте с помощью настраиваемых полей
  • Создайте фильтруемый локатор хранилища

И поскольку эти плагины используют шорткоды вместо «iframes» (например, ручной код Google Maps для вставки), они немного более удобны для пользователя ( т.е. вам не придется использовать вкладку «Текст» в редакторе WordPress ).

Я покажу вам описание с использованием самого популярного бесплатного плагина Google Maps — WP Google Maps.

Чтобы начать работу с этим уроком, убедитесь, что у вас установлен и активирован Google Maps Google.

Шаг 1. Создание и ввод ключа API Google Maps

Независимо от того, какой плагин Google Maps вы используете, это всегда будет первым шагом, потому что Google требует, чтобы вы получили что-то, называемое «ключом API», для работы с Картами Google.

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

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

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

Интеграция Google Maps с WordPress

Шаг 2. Редактирование моей первой карты

Бесплатная версия этого плагина позволяет вам создать только одну настраиваемую карту. Итак, чтобы сделать свою первую карту, вам нужно нажать «Изменить» в разделе «Моя первая карта»:

Интеграция Google Maps с WordPress

Это запустит вас в интерфейс редактора.

Шаг 3. Настройка основных параметров

В верхней части интерфейса редактора карт вы увидите несколько разных вкладок. Эти вкладки позволяют вам настроить основные параметры вашей карты:

  • Общие настройки — высота, ширина, выравнивание и тип карты (например, дорожная карта или спутник)
  • Темы — позволяет выбрать из 9 включенных тем. Они в основном меняют стиль вашей карты.
  • Направления — к сожалению, вы можете использовать только направления в версии Pro.
  • Store Locator — эта прекрасная функция позволяет вашим посетителям искать ближайший к ним магазин, что полезно, если вы работаете с физическими лицами.
  • Расширенные настройки — позволяет включать данные трафика и другие функции, хотя многие из них доступны только в версии Pro.

Интеграция Google Maps с WordPress

После того, как вы настроили эти параметры, вы фактически готовы работать на своей карте.

Шаг 4: Добавляем маркеры и другие элементы карты

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

Чтобы добавить маркер, вы можете:

  • Поискать местоположения в поле
  • Щелкнуть правой кнопкой мыши в любом месте карты, чтобы удалить маркер в этом конкретном месте

Интеграция Google Maps с WordPress

Как только вы сохраните маркер, он появится на карте и вы можете добавить еще один.

Вы также можете просмотреть полный список своих маркеров и изменить существующие маркеры в разделе «Ваши метки»:

Интеграция Google Maps с WordPress

На вкладке «Многоугольники и Ломаные линии» вы можете запустить интерфейс, который позволяет создавать более сложный набор фигур:

Интеграция Google Maps с WordPress

Закончив добавление элементов карты, обязательно нажмите «Сохранить карту».

Шаг 5: Вставьте карту с помощью шорткода

Как только вы сохранили карту:

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

Интеграция Google Maps с WordPress

Другие плагины Google Maps для WordPress

Хотя плагин WP Google Maps — самый популярный плагин для Google Maps, большинство самых классных функций заблокированы в бесплатной версии, что немного расстраивает нас.

Если вы ищете другие варианты, вот несколько хороших:

  1. WP Google Map Plugin — позволяет вам назначать свои собственные значки маркеров даже в бесплатной версии. Версия Pro позволяет отображать сообщения/пользовательские типы сообщений на ваших картах с помощью настраиваемых полей.
  2. Google Maps Widget — приятное легкое решение, позволяющее быстро встать и начать работать с картой.
  3. Maps Builder — я думаю, что у этого есть самый удобный конструктор карт, а функция Post Mashup в версии Pro позволяет автоматически заполнять карту, основанную на сообщениях на вашем сайте.

Например, посмотрите на интерфейс разработчика полноэкранных карт из плагина Maps Builder:

Интеграция Google Maps с WordPress

Все эти плагины довольно схожи. Итак, как только вы выясните, как создать свой ключ API и понять базовый интерфейс, вы должны в состоянии быстро подобрать себе подходящий плагин.

Заключительные мысли о Google Maps и WordPress

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

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

Если вам действительно нужно в WordPress специфичную функциональность, или если вы просто предпочитаете работать внутри приборной панели WordPress, то все плагины, которые я перечислил — варианты качества. Чтобы выбрать между ними, рассмотрите следующие факты:

  • Каждый плагин предлагает некий набор бесплатных функций (по сравнению с версией Pro), поэтому вы можете найти тот, который делает то, что вам нужно бесплатно.
  • Некоторые плагины лучше подходят для локаторов магазинов, а другие — для отображения сообщений на картах.

Наконец, некоторые темы и плагины WordPress включают встроенные функции карт. И многие разработчики страниц WordPress также включают в себя выделенные модули карт.

На этом все. До скорых встреч!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
2 комментария к статье "Интеграция Google Maps с WordPress: с плагином и без"
  1. Юрич: 25.03.2020 в 12:52

    Здравствуйте, Татьяна!
    Я обычно делаю через Яндекс карты. Там можно поставить несколько меток как вручную, так и в плагине Яндекс.Карт YaMaps для WordPress. Думаю найдете.

  2. Татьяна: 25.03.2020 в 12:46

    Добрый день!
    Подскажите пожалуйста, я правильно поняла, что при ручном методе установки гугл карты, добавление второго маркера местоположения невозможно?
    Если да, то может вы мне подскажете какой плагин в wordpresse позволяет это сделать?

Заказать сайт