Меню

WordPress google maps plugin настройка



Карта Google maps на WordPress

Карта Google maps на WordPress появится, если установить один из многочисленных плагинов этого назначения. В этой статье я представлю один из лучших, плагинов для показа карты Google на сайте с маркерами по конкретному адресу.

От автора

Здравствуйте. Плагин Google Maps Bank, позволяет разместить на страницах, постах и виджетах сайта две (в бесплатной версии) карты Google с указанием на каждой карте любого количества адресов. Адреса помечаются разнообразными тематическими маркерами и адреса показываются вплоть до дома.

Плагин постоянно обновляется, сегодня вижу тест на 4.9.5. У плагина большое количество настроек, возможность сделать несколько карт, возможность на одной карте маркировать неограниченное количество адресов в одном городе (районе) делает плагин незаменимым для банков, магазинов, банкоматов и т.п. коммерческих и общественных организаций.

Где взять плагин

Как всегда, берем плагин на wordpress.org (https://wordpress.org/plugins/google-maps-bank/) или в административной панели сайта на вкладке меню Плагины→Добавить новый→Правильное название плагина: Google Maps Bank — Easy Google Maps в окне поиска по слову. После активации плагина, переходим к настройкам.

Настройки плагина Google Maps Bank

Плагин на самом деле замечательный. Прежде чем его найти я пробовал до десятка maps плагинов. Все они блекнут перед этим продуктом авторов: Tech-Banker (Индия) и Gallery-Bank (Сингапур).

Для настроек плагина входим на вкладку: Google Maps, которая появится в меню консоли после активации плагина.

Плагин карта Google maps на WordPress многоязычный. При создании карты укажите язык, на каком будете работать. Я указал русский язык. Demo карта сделана на английском и все настройки Demo карты будут тоже на английском.

В приборной панели плагина шесть пунктов.

Нам интересны два пункта:

  • Приборная панель;
  • Управление картами.

Начнем с приборной панели.

Приборная панель Google Maps

После того как карты созданы вы сможете на вкладке «Приборная панель» удалить ненужные карты или выбрав карту, направить её на редактирование. После нажатия кнопки: Get to next step, вы сможете пройти все семь шагов, которые проходят при создании новой карты на вкладке «Управление картами».

Карта Google maps на WordPress — управление картами

На этой вкладке можно редактировать созданные карты и создавать новую карту.

Редактирование карт

Для полного редактирования нужно пройти 7 шагов, которые проходят при создании новой карты:

  • Поменять название;
  • Добавить метку;
  • Добавить маркеры;
  • Добавить полигоны (выделить зоны);
  • Добавить линии ( как доехать, дойти);
  • Добавить слои (в платной версии);
  • Дополнительные настройки.

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

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

Как создать новую карту

Новая карта создается на вкладке «Создать карту». Важно! Вкладка «Создать карту» пропадет после создания вами двух лимитных (для бесплатной версии) карт. Demo карту, удалите после ознакомления.

Для примера, создам карту магазина ГУМ в Москве.

Нажимаем кнопку «Создать карту».

Шаг 1. Даем карте Имя (ГУМ). Указываем язык (Русский). Выбираем тип карты (берем дорожная карта).

Шаг 2. Добавляем место

Пишем адрес объекта. ГУМ это Красная площадь. д.3. По адресу плагин покажет список адресов на выбор, как в поисковике. Выбрав правильный объект, плагин сам выставит широту и долготу объекта и покажет его на карте стандартным маркером, который поменяем на следующей странице.

Шаг 3. Замена маркера

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

Шаг 4. Добавить многоугольник

На этом шаге, вы можете выбрать несколько точек на карте и объединить их в многоугольник. Для чего? Например, обозначить какую-то зону, где стоят ваши банкоматы или ваши магазины. Для ГУМа зон создавать не будем. Пример соданной зоны на фото внизу статьи.

Читайте также:  Настройка прайс листа яндекс маркет

Шаг 5. Создаем маршруты

Создадим маршрут, как дойти до ГУМа от метро Лубянка. Находим на карте метро Лубянка. Кликаем по нему. Появится окно, показать на карте Google.

На этой карте кликаем по метро правой кнопкой мыши и выбираем: Что здесь? Карта покажет долготу и широту выбранного объекта.

В поля долгота и широта, сначала вписываем координаты ГУМа. Жмем «Add Polyline Data». Потом координаты метро Лубянка. Жмем «Add Polyline Data». Если нужно, меняем дизайн проложенной линии маршрута.

Но при таком вводе маршрута получается прямая линия, которая мало подходит для путешествий.

Чтобы проложить правильный маршрут, есть кнопка «Ясно ломаная». Идете курсором по предполагаемому маршруту и на каждом перекрестке кликаете и рисуете ломаную линию маршрута. Для примера я нарисовал нереальные маршруты.

После всех настроек и прокладки маршрута (если нужно), жмем кнопку «Добавить полилиния».

Шаг 6 пропускаем — он для платных версий.

Шаг 7. Дополнительные настройки

Здесь можно отключить некоторые «навесы» на карте: масштаб, и т.п.

Финалом будет нажатие на кнопку «Создать карту».

Карта создана, управлять и редактировать ей можно с вкладки «Управление картой».

Помещаем карту в статью

Все гениальное просто. После активации плагина, в редакторе появляется кнопка «Add Google Maps Bank Shortcode» рядом с кнопкой «Добавить медиафайл». Нажимаем на кнопку, выбираем карту, меняем дизайн (если нужно) и вставляем карту в статью.

Помещаем карту в виджет

Здесь все просто. После создания карты, на вкладке Внешний вид→Виджеты, появляется виджет Google maps, который добавляете в любой сайдбар темы сайта.

На этом все. Тема: Карта Google maps на WordPress исчерпана. Вот пример, как выглядят карты на сайте.

Источник

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

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

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

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

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

Но вы можете делать это только в том случае, если знаете, как добавить 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»
  • Скопируйте код вставки (вы будете использовать это в следующем шаге)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как создать пользовательские карты 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, вставьте его в поле и нажмите «Сохранить»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Нажмите «Карты» на боковой панели панели инструментов 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:

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

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

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

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

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

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

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

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector