Как сделать карту Google с несколькими булавками в WordPress

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

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

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

Зачем использовать карты Google с несколькими булавками на вашем сайте WordPress

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

1. Покажите все свои места в одном месте

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

2. Помогите пользователям найти ближайшее место

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

3. Сэкономьте время для посетителей

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

4. Повышение локального SEO с данными о местоположении

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

5. Сделайте ваш сайт более интерактивным

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

6. Идеально подходит для сервисных или многочастотных предприятий

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

Предварительные условия для создания карты Google с несколькими булавками с элементом

Давайте проясним одну вещь в начале. Elementor имеет встроенный виджет под названием Google Map . Но его функции очень ограничены. Вы не можете добавить несколько контактов на карту, используя этот виджет по умолчанию. Итак, чтобы сделать это, вам понадобится дополнительный дополнение.

Один отличный вариант - HappyAddons . Он предлагает виджет под названием Advanced Google Maps , который позволяет легко создавать и добавлять несколько контактов на вашу карту без каких -либо хлопот.

Таким образом, в общей сложности вам нужны следующие инструменты на вашем сайте для этого урока.

• Элементар
• HappyAddons
• HappyAddons Pro

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

Как сделать карту Google с несколькими булавками в WordPress: пошаговый учебник

В этом разделе мы объясним шаг за шагом, как создать карту Google с несколькими булавками в WordPress с плагинами Elementor и HappyAddons. Мы также украсим этот раздел необходимыми скриншотами, чтобы вы могли понять полный процесс. Продолжайте читать!

Шаг 01: Откройте страницу и найдите расширенный виджет Google Map

Откройте сообщение или страницу, где вы хотите создать карту Google с несколькими булавками. Найдите предварительный виджет Google Map на панели Elementor. Перетащите его на холст Elementor.

Шаг 02: Получить ключ Google API

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

Вы будете доставлены в раздел «HappyAddons» в бэкэнде веб -сайта. Найдите опцию Google Map . Затем нажмите опцию Get API .

Вы приедете на страницу Google Cloud.

Теперь вы должны найти «Maps JavaScript API». Для этого введите карты JavaScript API в поле поиска. Как только появится опция, нажмите .

После перейти на страницу API Maps JavaScript, включите опцию .

Нажмите кнопку «Согласиться и продолжить» . До этого вы можете выбрать свою страну. Мы размыли это для нашего дела.

Google API -ключ не технически бесплатный. Вы должны заполнить информацию о выставлении счетов, чтобы получить API.

Примечание (как это бесплатно): Хотя это не технически бесплатно, вы получите токены, эквивалентные 200 долларов в месяц . С помощью этого токена ваша карта Google может быть загружена или просмотрена до 28 000 раз . Только если этот предел представления/нагрузки будет скрещен, будет заряжена ваша карта.

После этого вам будет предоставлено всплывающее окно. Вы должны дать некоторую информацию о вашем бизнесе, где будет использоваться эта карта. После того, как это сделано, нажмите кнопку отправки в правом нижнем углу всплывающего окна.

Ключ API Google Map сразу появится на вашем экране с новым всплывающим окном. Скопируйте ключ API .

Вернитесь в опцию HappyAddons Google API и вставьте там свой код . Нажмите кнопку «Сохранить изменения» в конце.

Теперь приходите к своему Canvas Elementor и обновите/перезагрузите его. Карта Google появится на холсте.

Проверьте, как создать график в WordPress с элементом.

Шаг 03: Добавьте несколько контактов на карту

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

После того, как раздел маркера карты расширен, вы можете добавить столько булавок, сколько хотите, нажав кнопку « + Добавить» .

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

Шаг 04: Настройка настроек карты

Точно так же, разверните раздел «Настройки карты» .

Вы найдете много вариантов в этом разделе.

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

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

Шаг 05: стилизовать расширенный виджет Google Map

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

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

Шаг 06: Предварительно просмотрите дизайн

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

Таким образом, вы можете сделать карту Google с несколькими булавками в WordPress с элементом.

Усовершенствованные советы для карты Google с несколькими булавками

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

1. Используйте пользовательские изображения вместо значков

Вместо красного штифта по умолчанию попробуйте использовать пользовательские значки или изображения для каждого местоположения. HappyAddons позволяет сделать это с вкладки Content> Раздел маркера карты. Пользовательские изображения и значки могут сделать вашу карту более ясной и привлекательной.

2. Настройки масштабирования и центра

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

3. Сделайте это мобильным дружелюбным

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

4. Встроенные карты на страницах контакта или местоположения

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

Узнайте, как создать динамическую веб -страницу в WordPress с элементом.

Заключение

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

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

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