Полное руководство: как встроить карты Google в WordPress

Как встроить одно местоположение Google Maps в WordPress

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

Вот как это все работает:

Перейдите на веб-сайт Google Maps, как обычно, и найдите место, которое вы хотите встроить. Вы можете искать что угодно. То есть:

• Целая страна
• Конкретный город
• Конкретный бизнес
• Вы называете это

Это действительно не имеет значения!

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

Вы должны увидеть небольшое всплывающее окно. Нажмите кнопку « Встроить карту » в этом всплывающем окне:

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

Теперь перейдите к записи или странице WordPress, куда вы хотите встроить окно Google Maps.

В редакторе WordPress перейдите на вкладку « Текст » и вставьте код, который вы скопировали из Google Maps, в то место, где вы хотите, чтобы ваша карта отображалась:

Теперь опубликуйте свой пост, как обычно, и вы должны увидеть окно Google Maps в интерфейсе вашего сайта WordPress:

Достаточно легко, верно?

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

Как встроить карты Google с несколькими маркерами местоположения в WordPress

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

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

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

Чтобы начать, перейдите в Google Мои карты и нажмите «Начать », чтобы запустить интерфейс. В интерфейсе выберите опцию « Создать новую карту »:

Затем используйте интерфейс для создания карты. Начать работу может быть немного сложно, но как только вы освоитесь, пользоваться им будет довольно просто. Вы можете искать объекты с помощью поля поиска и добавлять маркеры на карту с помощью кнопки « Маркер »:

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

Затем, как и раньше, вы можете вставить код, предоставленный Google Maps, на вкладку « Текст » редактора WordPress, чтобы отобразить карту на вашем сайте WordPress.

Плагины WordPress, которые помогут вам работать с Google Maps еще больше

Хотя вам на самом деле не нужен плагин для обработки базового встраивания Карт Google, как я показал вам выше, плагины могут пригодиться, если вам нужна большая гибкость (или если вам нужен более удобный способ реализации этой гибкости).

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

WP Гугл Карты

WP Google Maps — самый популярный бесплатный плагин Google Maps в каталоге плагинов WordPress.org.

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

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

Для начала установите и активируйте WP Google Maps. Поскольку он указан на WordPress.org, вы можете сделать это прямо из панели управления WordPress.

Как только вы активируете его, перейдите к новой опции « Карты » на боковой панели, чтобы начать.

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

После того, как вы введете свой API-ключ, вы сможете отредактировать мою первую карту по умолчанию ( помните — бесплатная версия этого плагина позволяет создать только одну карту ):

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

Это очень просто и гибко — единственным недостатком является ограничение на одну карту в бесплатной версии.

Конструктор карт

Еще одним хорошим вариантом для создания встраивания Google Maps с помощью плагина WordPress является Maps Builder.

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

Как только вы это сделаете, вы можете перейти в Google Maps → Добавить новую , чтобы создать новую карту. В этом интерфейсе нажмите кнопку Open Map Builder , чтобы запустить удобный интерфейс:

Там вы можете построить свою карту, используя боковую панель плагина:

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

Поиск магазина WP

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

Хотя вы можете найти несколько плагинов для этого, мне нравится WP Store Locator, потому что он гибкий и отлично выглядит.

Используйте модуль Google Maps вашего любимого конструктора страниц

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

Например, популярный плагин Divi Builder включает модуль Google Maps, который вы можете немного настроить через интерфейс плагина:

Поэтому, если вы уже используете компоновщик страниц, проверьте, есть ли в вашем компоновщике страниц инструмент Google Maps, прежде чем бежать искать специальный плагин Google Maps,

Забавный твик для продвинутых пользователей

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

Но если вы разбираетесь в WordPress и настраиваемых полях, вы можете использовать настраиваемое поле для автоматического создания карты на основе схемы URL-адресов карты Google Maps.

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

Затем, с небольшой предварительной обработкой для удаления пробелов, вы можете вставить этот адрес во что-то вроде ниже в iframe в файлах шаблона вашей темы:

И вуаля! Все, что нужно сделать пользователю, это ввести адрес в редакторе WordPress, и встраивание Google Maps автоматически появится в интерфейсе для этого местоположения.

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

Подведение итогов

Если вы просто хотите сделать что-то простое, например, встроить обычное местоположение Google Maps в WordPress или получить более продвинутые возможности с несколькими маркерами карты или автоматическим созданием карты, у вас есть множество вариантов.

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

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