Як впровадити карту Google на веб-сайт: додаємо карту проїзду

Як впровадити карту Google на веб-сайт: додаємо карту проїзду

Додавання адаптивного віджета Google Maps може допомогти споживачам знайти компанію, підвищити довіру до організації та поліпшити загальне враження. Вбудовування карти на сайт також може знизити показник відмов і допомогти в пошуковій оптимізації. Комплекс SEO-заходів реалізують для клієнтів спеціалісти Inweb.

Як додати на сайт карту або маршрут?

Як додати гугл карту в HTML. Легко. Ось алгоритм:

  1. Відкрийте Google Карти.
  2. У пошуковому рядку введіть назву компанії, адресу якої ви хочете додати.
    В поисковой строке введите название компании адрес которой вы хотите добавить
  3. Виберіть зі списку компанію, яка вас цікавить.
  4. Натисніть кнопку «Поділитись».
    Нажміть кнопку «Поділитися»
  5. Відкрийте вкладку Вбудовування карт.
    Відкрийте вкладку «Вбудовування карт»
  6. Виберіть необхідний розмір карти: середній, маленький, великий або власний. Для цього натисніть стрілку вниз, ліворуч від поля з кодом.
    Виберіть необхідний вам розмір карти
  7. Скопіюйте текст із поля та вставте його в HTML-код свого сайту або блогу.
    Скопируйте текст с тегом iframe с поля и вставьте его в HTML-код своего сайта или блога

Пам’ятайте, що на вбудованих картах немає додаткової інформації, наприклад про пробки на дорогах.
Сьогодні, коли йдеться про пошук адреси або розташування, велика кількість людей використовує Google карти. Користувачі віддають перевагу цій платформі через чіткість її напрямків.

?️ Як вставити на сайт Google-карту: Етапи впровадження Google карти на сайт:
? Додати карту Google на сайт, крок 1: Необхідно пройти за посиланням http://maps.google.ru/maps та ввести адресу розташування у графі пошуку.
? Додати карту Google на сайт, крок 2: Потім натиснути кнопку “Поділитися”.
?️ Додати карту Google на сайт, крок 3: У вікні, перейдіть до вкладки “Вбудовування карт”.
?Додати карту Google на сайт, крок 4: Далі необхідно вибрати відповідний розмір карти.
? Додати карту Google на сайт, крок 5: Потім натисніть кнопку “Копіювати HTML”.
?️ Додати карту Google на сайт, крок 6: Зайдіть у редактор сторінки та натисніть на кнопку “HTML”.

Переваги, через які власники бізнесу захочуть вбудувати Google карту на сайт:

  • ресурс заслуговує на довіру, оскільки його обирає більшість користувачів з усього світу;
  • покращення користувальницької навігації. Завдяки Google Maps відвідувачі вашого сайту можуть швидко знайти місцезнаходження вашого бізнесу, офісу, ресторану тощо;
  • поліпшення SEO-оптимізації. Впровадження на сайт Google карти може позитивно позначитися на пошуковій оптимізації. Оскільки вона індексується пошуковими системами і може покращити видимість бізнесу у пошуковій видачі. Особливо це важливо для локального бізнесу, так як допомагає залучити більше локальних клієнтів;
  • збільшення мобільного трафіку. Більшість запитів з мобільних пристроїв пов’язані з розташуванням. Тому дуже важливо щоб на сайті була гугл карта.
    економія час на пояснення кожному потенційному клієнту як дістатися до вас;
  • є ймовірність, що потенційний клієнт скористається саме вашою послугою, оскільки інтерактивна карта на вашому сайті виглядає професійніше і сучасніше, ніж звичайний рядок з адресою;
  • користувачам немає необхідності залишати вашу сторінку, що збільшуватиме ваш показник відмови;
  • це безкоштовно, а також від вас не знадобиться жодних зусиль і великих тимчасових витрат.

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

Наглядный пример отображения геолокации компании на Google Картах

Наочний приклад відображення геолокації компанії на Google Картах

Як додати гугл карту на сайт?

Перш за все необхідно зареєструвати компанію у сервісі Google My Business. Зверніть увагу, що компанія може існувати на картах. Введіть назву компанії у форму перевірки. Якщо її було зареєстровано раніше, решта інформації підтягнеться автоматично. Якщо вашій компанії немає на картах гугл, вам потрібно буде її додати.

Для цього необхідно виконати кілька простих дій:

  1. Відкрийте Google My Business.

Відкрийте Google My Business

  1. Вкажіть назву вашої компанії, у вікні реєстрації.
    Укажите название вашей компании, в появившемся окне регистрации
  2. Виберіть категорію, яка найбільше підходить вашому бізнесу.
    Выберите категорию, которая больше всего подходит вашему бизнесу
  3. Вкажіть адресу розташування вашої компанії (вона буде відображатися в результаті на картах).
  4. Вкажіть контактні дані та адресу вашого веб-сайту, після чого реєстрацію буде завершено.

Створення профілю компанії в Google My Business не обов’язково, однак, ваша точка геолокації з наявністю облікового запису буде виглядати привабливіше з відображенням відгуків про вашу компанію:

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

А ось як виглядає точка компанії на карті без профілю Google My Business:

А вот как выглядит точка компании на карте без профиля Google My Business

Інтеграція з Google maps з використанням коду Iframe, вбудованого з Google

У цьому розділі ви дізнаєтесь, як підключити гугл карту до HTML-коду сайту. Ніякий інший код форматування не застосовується.

Як отримати код для вбудовування Google та як вставити карту на сайт

  1. Перейти на Google Карти.
  2. Введіть адресу компанії в рядок пошуку, а потім натисніть кнопку пошуку.
  3. Клацніть Поділитися.
  4. Виберіть «Вставити карту» на сайт.
  5. Виберіть розмір карти зі списку, що розкривається.
  6. Виберіть та скопіюйте HTML-код впровадження iframe.

Вставьте этот код на свою HTML-страницу или виджет

Вставте цей код на свою сторінку HTML або віджет.

Приклад коду:

Вміст атрибута src є кодом розташування Google. У разі зміни верстки сторінок сайту рекомендується встановлювати у відсотковому співвідношенні для уникнення деформації блоку з картою.

Ця карта має статичну ширину та висоту. Розмір можна настроїти, змінивши ці атрибути розміру.

Також можуть бути випадки, в яких у власників сайту немає доступу до вихідного коду. Наприклад, на платформі Хорошоп.

Розглянемо принцип додавання Google карт за допомогою Iframe на платформі Хорошоп

  1. Перш за все, аналогічно першому випадку, необхідно скопіювати код Iframe з Google карт.
  2. Скопійований фрагмент коду необхідно додати в адмінці вашого сайту: Налаштування → Загальні налаштування. У загальних налаштуваннях шукаємо пункт «HTML код карти проїзду» → Додаємо раніше скопійований HTML-код iframe → Натискаємо «Зберегти».

Скопированный фрагмент кода необходимо добавить в админке вашего сайта

Приклад виведення Iframe карти гугл на сайті Хорошоп:

Приклад виведення Iframe карти гугл на сайті Хорошоп

Чи потрібно платити за Карти Google, щоб розмістити їх на веб-сайті?

Базове вбудовування здійснюється безкоштовно і включає простий вигляд, мітку на карті та інформацію про вашу компанію. Складніші функції оплачуються додатково. Наприклад, щоб зобразити кілька місць розташування або реалізувати перегляд вулиць Google, пошук маршрутів і пошук місць, Google починає стягувати плату, після досягнення квоти використання.

Часті питання про інтеграцію Google Maps на сайт

Як вставити карту на сайт WordPress?

На WordPress можна використовувати плагіни для додавання карт, але ви також можете вбудувати Google карту HTML-код сайту за допомогою конструктора карт.

Як вставити гугл карту на сайт?

Додати Google карту на сайт не складе труднощів і займе лише кілька хвилин. Ви можете зробити це в будь-якій CMS (WordPress, OpenCart, Joomla, Drupal, Blogger або Squarespace). Це не потребує жодних технічних знань. Крім того, для вбудовування карти на ваш сайт не потрібний ключ API. Просто слідуйте нашому керівництву “Як додати Google Maps на сайт” у нашій статті.

Навіщо додавати Google карту на сайт?

Зараз, коли мова заходить про пошук адреси або розташування, 70% людей відкривають на своїх пристроях карти Google. Крім того, 25% з них віддають перевагу цій платформі саме через її чіткі напрямки. Використання Google Maps на веб-сайт значно спростить взаємодію користувача з пошуком вашої компанії на карті.

Переваги впровадження карти Google на веб-сайт

Якщо ви вставите карти Google на веб-сайт, клієнтам буде зручно вас знайти. Якщо їм сподобається ваша компанія, то вони зможуть легко відвідати вас завдяки впровадженій карті Google на сайті. Не кожен відвідувач вашого сайту буде достатньо терплячий, щоб шукати вашу адресу на карті вручну. Проте, якщо ви додасте карту Google на сайт, то їм не потрібно докладати зусиль, щоб визначити ваше місце розташування та напрямок.

Олександр Олійник
Олександр Олійник
• SEO Specialist
Агенція digital-маркетингу Inweb
За час роботи в компанії Inweb на позиції SEO-фахівця почав більш поглиблено вивчати SEO-просування сайтів: закінчив курси з ASO-просування, верстки сайту, онлайн-курс «Папа бренда» Андрія Федоріва, курси з лінкбілдингу. Раніше працював адміністратором магазину у міжнародній компанії Adidas. Потім з відзнакою закінчив курс Комп'ютерної Академії ШАГ за спеціальністю «Інтернет-маркетинг» і розпочав свій шлях у digital-маркетингу. Активно займаюсь спортом. Пробіг більше п'яти марафонів, і точно знаю: щоб досягти результату, потрібна кропітка щоденна робота. Пишаюся, що працюю в команді з професіоналами та допомагаю розвивати IT-індустрію в Україні.
Більше цікавого