Як додати карту Google на сайт

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

Навіть якщо ви ніколи не писали жодного рядка HTML, можна легко створити Гугл карту та впровадити її за допомогою кількох кліків. Далі ми покажемо, як отримати необхідний код, вибрати оптимальний розмір і коректно вставити iframe на будь-яку платформу — від простого статичного веб-ресурсу до WordPress. Цей докладний гайд допоможе навіть новачку без зайвих складнощів додати інтерактивну карту.

Чому варто додати карту Google на сайт?

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

1. Покращується досвід користувача.

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

Отже, Гугл карта — це:

• швидкість і зручність: клієнт одразу орієнтується, де ви знаходитеся;
• мобільна адаптивність: на смартфонах і планшетах Google карта підлаштовується під розмір екрана;
• інтерактивність: збільшення (зум), прокрутка, перехід у режим супутника чи гібрид — усе це доступно без додаткових дій.

2. Підвищується довіра до компанії.

Інтерактивна мапа Google демонструє реальне місцезнаходження вашого офісу чи магазину. Це працює як соціальний доказ та демонструє:

• прозорість: люди бачать, що ви дійсно існуєте за тією адресою, яку вказуєте;
• професіоналізм: наявність добре оформленої Google карти свідчить про увагу до деталей і турботу про клієнта;
• брендування: можна вбудувати стилізовану карту з вашим логотипом чи кольорами, підкресливши унікальність веб-ресурсу.

3. Допомагає людям швидше знайти компанію.

Карта на сторінці «Контакти» або «Про нас» суттєво знижує бар’єр входу для клієнта, тому що людина отримує:

• маршрут «до дверей» від поточного місця;
• пошук поруч: може побачити, що поряд є зупинки транспорту, паркінги чи інші корисні об’єкти;
• додаткові дані: при наведенні видно телефон, сайт чи відкриті години роботи. 

4. Пошуковики люблять SEO в локальному пошуку.

Інтегрована Google мапа сприяє кращій індексації сторінки та виведенню в картах і Local Pack. Додатково з’являється:

• сигнал для Google: пряме вбудовування iframe чи використання Maps Embed API підтверджує релевантність сторінки для локальних запитів;
• розширений результат: ваш бізнес може з’явитися у блоці з картою прямо в результатах пошуку;
• збільшення клікабельності: така сторінка отримує більше переходів, що підвищує поведінкові метрики.

5. Зниження показника відмов та збільшення часу на веб-ресурсі.

Коли відвідувачам потрібно натиснути мінімум кнопок, вони рідше покидають сайт. Цьому сприяє:

• відкладене завантаження (loading=”lazy”), що допомагає швидше відображати контент вище екрану;
• інтерактивні елементи, які затримують увагу, тож клієнт проводить на вашій сторінці більше часу, переглядаючи карту.

6. Можливості аналітики та ретаргетингу.

Через Google Analytics і Google Tag Manager можна відстежувати взаємодії з картою. А саме:

• події кліків: скільки людей натиснули «Маршрут» чи збільшили масштаб;
• теплові карти: на які ділянки мапи найбільше «зазирали» користувачі.

А також налаштовувати ретаргетинг: створювати аудиторії для реклами, базуючись на тих, хто шукав розташування.

7. Відмінність від конкурентів.

Ще не всі сайти використовують інтерактивні карти, тому ви створюєте додаткову візуальну цінність. А також можна створити унікальний контент, надаючи власні підказки, маркери з описом чи фотографіями всередині iframe.

Профіль компанії в Google My Business: реєстрація та верифікація

Спершу варто перевірити наявність чи зареєструвати свій бізнес у сервісі Google My Business. Це забезпечить коректне відображення вашої компанії в локальних результатах пошуку та на самій карті.

1. 1. Перейдіть на сайт Google My Business і увійдіть під тим же обліковим записом, що використовуєте для Google Maps.

1. Натисніть «Створити обліковий запис» і введіть назву компанії, яка точно співпадає з тією, що ви плануєте показати.
2. Вкажіть адресу – обов’язково перевірте, щоб маркер став саме в правильному місці.
3. Оберіть категорію бізнесу, додайте контактний номер телефону, URL сайту та графік роботи.
4. Завантажте логотип, фото всередині приміщення та зовнішнього фасаду для кращого сприйняття клієнтами.
5. Оберіть метод верифікації (листівка поштою, дзвінок чи SMS) і підтвердіть свій статус власника.

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

Підготовка до впровадження карти Гугл

Після того, як компанія з’явилася у сервісі Google My Business, потрібно провести ще ряд підготовчих процесів. Це дозволить уникнути помилок і зекономити час.

1. Визначте місце для показу.

Почніть із чіткого визначення назви об’єкта — використовуйте саме ту офіційну назву вашої компанії або закладу (наприклад, «КАФЕ SweetTime»), щоб користувачі одразу впізнали, що це за місце. Далі сформуйте адресу у вигляді, зрозумілому для пошукових систем: вкажіть вулицю, номер, місто та поштовий індекс (наприклад, «вул. Хрещатик, 22, Київ, 01001»). І нарешті, обов’язково відкрийте цю адресу в Google Maps і переконайтеся, що мітка стоїть саме там, де ви хочете її показати — це допоможе уникнути зайвих запитань і неточностей.

2. Підготуйте ключ API Google Maps (не обов’язково для базового iframe, але необхідно для Embed API чи JavaScript).

Щоб отримати API key для Embed API або JavaScript API, спочатку зайдіть у свій обліковий запис на Google Cloud Console або створіть новий, якщо у вас його ще немає. Далі створіть новий проект або оберіть вже існуючий, у якому ви плануєте працювати з картами. Перейдіть у розділ APIs & Services → Library, знайдіть там Maps Embed API або Maps JavaScript API і натисніть Enable (Активувати). Після цього перейдіть у APIs & Services → Credentials і створіть новий API key.

Щоб захистити ключ від несанкціонованого використання, обов’язково налаштуйте обмеження – пропишіть HTTP-реферери або IP-адреси, з яких дозволені запити. Для використання Google Maps API також необхідно підключити платіжний обліковий запис, проте зазвичай безкоштовний ліміт покриває потреби невеликих сайтів.

3. Переконайтеся в доступі до коду веб-ресурсу

Якщо ви впевнені у власному вмілому редагуванні коду, можете відкрити HTML-файли сайту (наприклад, через FTP, cPanel або Git) і внести зміни безпосередньо в потрібний шаблон — скажімо, contact.html або footer.php. Якщо ж ваш веб-ресурс працює на CMS (WordPress, Joomla, Drupal), знайдіть у налаштуваннях сторінки або в адмін-панелі блок чи віджет для довільного HTML-коду й просто вставте туди готовий <iframe>. А у випадку конструкторів сайтів (Wix, Weblium) скористайтеся вбудованим віджетом «HTML-код» або «Embed» – він призначений саме для копіювання та вставки iframe-коду без жодних додаткових налаштувань.

4. Перевірте технічні обмеження.

Якщо на вашому веб-ресурсі встановлена жорстка Політика безпеки вмісту (CSP), важливо дозволити завантаження карт Google: додайте в директиви frame-src та script-src такі джерела, як https://www.google.com та https://maps.gstatic.com, щоб iframe із мапою завантажувався без помилок. Окрім того, подбайте про адаптивність – замість жорстко вказаних пікселів для ширини карти краще використовувати width=”100%”, щоб вона автоматично підлаштовувалася під розміри екранів на десктопі, планшеті чи смартфоні. Таким чином ваша карта Google залишатиметься доступною і зручною на будь-яких пристроях.

5. Підготуйте додаткові дані (за потреби).

Іноді буває потрібно розташувати мітку максимально точно — у цьому випадку замість пошукового рядка варто вказати прямі координати (latitude, longitude), які визначають положення об’єкта з точністю до метрів. Окрім того, для покращення роботи карти на сайті рекомендується додати кілька корисних атрибутів до вашого <iframe>:

• loading=”lazy” забезпечить відкладене завантаження, що прискорить відображення основного контенту сторінки;
• referrerpolicy допоможе контролювати, які дані про реферера передаються при завантаженні карти;
• allowfullscreen дозволить користувачам відкривати мапу на весь екран для зручнішого перегляду.

Таким чином, ви отримаєте не лише точне розташування мітки, але й оптимізуєте завантаження та взаємодію з картою на вашому сайті.

Після того як усі ці пункти виконані, ви будете готові перейти до безпосереднього вбудовування iframe або налаштування Embed API на своєму веб-ресурсі.

3 способи, як додати Гугл карту на сайт

Спосіб 1: Найпростіший — через вбудований iframe

Цей варіант підходить для невеликого сайту, якщо немає спеціального розробника.

1. Перейдіть на  Google Maps.
2. У полі пошуку введіть назву компанії або точну адресу.
3. Коли з’явиться мітка на мапі — натисніть кнопку «Поділитися».
4. Перейдіть до вкладки «Вбудовування карти».
5. Виберіть розмір (маленький, середній, великий або «індивідуальний»).
6. Скопіюйте згенерований код — він починається з <iframe> і закінчується </iframe>.
7. Вставте цей код у HTML-код вашого веб-ресурсу — туди, де має з’явитися карта.

Приклад:

Копіювати код не складніше, ніж вставити відео з YouTube, тож впорається і новачок.

Спосіб 2: Через Maps Embed API з API ключем

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

1. Зайдіть на Google Cloud Console.
2. Створіть проект і активуйте Maps Embed API.
3. Згенеруйте API ключ.
4. Сформуйте ось такий URL:

5. Вставте цей URL у тег iframe:

Спосіб 3: Якщо у вас WordPress

Все ще простіше. Можна вставити iframe-код прямо в редактор Gutenberg або встановити плагін — наприклад, WP Google Maps:

• активуйте плагін;
• додайте API ключ у налаштуваннях;
• створіть карту через зручний інтерфейс;
• вставте її на сторінку за допомогою шорткоду.

Додаткові параметри та налаштування

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

• zoom: встановлює рівень зуму (0–21) для деталізації або огляду великої території.
• maptype: вибір типу карти — roadmap (стандартна), satellite (супутник), hybrid (гібрид) або terrain (рельєф).
• language: локалізація інтерфейсу карти мовою вашої аудиторії.
• region: пріоритет локальних даних для точнішої видачі міток і назв.

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

Висновок

Додавши інтерактивну карту Google на свій сайт, ви поєднуєте простоту використання для клієнта із потужними інструментами аналітики та просування. Навіть без навичок програмування кілька кліків — і відвідувачі одразу бачитимуть ваше реальне місцезнаходження, зможуть прокласти маршрут і не залишать веб-ресурс через зайві кроки. Рекомендована підготовка, правильна реєстрація в Google My Business та вибір оптимального способу вбудовування гарантують, що ваша Гугл мапа працюватиме коректно на будь-якій платформі та принесе максимум користі вашому бізнесу.

Олександр Романенко

Team Lead/Senior SEO-спеціаліст

Сторінка автора