Топ-100

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

12

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

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

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

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

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

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

Но вы можете делать это только в том случае, если знаете, как добавить Google Карты в 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, большинство самых классных функций заблокированы в бесплатной версии, что немного расстраивает нас.

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

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

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

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

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

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

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

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

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

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

    Источник

    Комментарии закрыты.

    This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

    Privacy & Cookies Policy