Назвы пунктаў меню даю па англамоўным інтэрфейсе — на іншых мовах яны перакладзеныя.
Крок 1. Знайдзіце месца на Google Картах
Адкрыйце Google Карты на камп’ютары і знайдзіце сваю кампанію па назве. Калі ў кампаніі ёсць Профіль у Google, убудоўвайце менавіта яго: тады на карце будуць назва, рэйтынг і кнопка маршруту, а не проста кропка па адрасе. Калі профіль яшчэ не пацверджаны, спатрэбіцца артыкул пра пацвярджэнне Профілю кампаніі.
Крок 2. Скапіруйце код
- У картцы месца націсніце Share. Калі патрэбны проста фрагмент карты без карткі, адкрыйце меню злева ўверсе і выберыце Share or embed map.
- Перайдзіце на ўкладку Embed a map.
- Пры жаданні выберыце памер і пасуньце карту, каб месца апынулася ў цэнтры.
- Націсніце Copy HTML.
Вы атрымаеце код выгляду <iframe src="https://www.google.com/maps/embed?pb=…"></iframe>.
Крок 3. Устаўце код на сайт
Устаўце код у патрэбнае месца старонкі. У большасці візуальных рэдактараў для гэтага ёсць рэжым HTML або асобны блок для кода. Улічыце, што некаторыя рэдактары і фільтры CMS з меркаванняў бяспекі выразаюць iframe. Калі пасля захавання карты няма, праверце налады фільтра тэксту для сваёй групы карыстальнікаў.
Крок 4. Зрабіце карту адаптыўнай
У кодзе з Google Карт стаіць фіксаваная шырыня, напрыклад width="600". На тэлефоне такая карта вылазіць за экран. Прасцей за ўсё замяніць шырыню на 100%:
<iframe src="https://www.google.com/maps/embed?pb=…"
width="100%" height="400" style="border:0;"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"
title="Наш офіс на карце"></iframe>
Атрыбут loading="lazy" адкладвае загрузку карты, пакуль наведвальнік не пракруціць да яе, і паскарае старонку. Атрыбут title патрэбны экранным дыктарам, каб назваць карту.
Як убудаваць маршрут
Пабудуйце маршрут у Google Картах праз Directions, выберыце варыянт, націсніце Share → Embed a map → Copy HTML. Так зручна паказаць, напрыклад, як прайсці да офіса ад вакзала або паркоўкі.
Калі без API-ключа не абысціся
Карта з Share падыходзіць для адной кропкі або маршруту. Ключ Google Maps Platform патрэбны, калі вы хочаце:
- паказаць на адной карце некалькі філіялаў або аб’ектаў са сваімі меткамі;
- падказваць адрас пры ўводзе ў форме заказу або дастаўкі;
- разлічваць адлегласць або кошт дастаўкі;
- аформіць карту ў фірмовых колерах.
Для ўбудавання карт праз API ў Google ёсць Maps Embed API: паводле Google, усе яго запыты бясплатныя і без абмежавання колькасці. Астатнія API платныя звыш бясплатнага аб’ёму, таму ключ абмяжоўваюць па дамене і сочаць за выдаткамі.
Прыватнасць. Убудаваная карта загружаецца з сервераў Google і можа ўсталёўваць cookie. На сайтах для наведвальнікаў з ЕС гэта ўлічваюць у cookie-банеры і палітыцы прыватнасці — напрыклад, паказваюць карту пасля згоды або па кліку.
Частыя памылкі
- Убудавана кропка па адрасе, а не Профіль кампаніі — кліент не бачыць назву і водгукі.
- Фіксаваная шырыня ламае вёрстку на тэлефоне.
- Карта стаіць на кожнай старонцы сайта — гэта лішняя загрузка, дастаткова старонкі «Кантакты».
- Замест карты ўстаўлены скрыншот — па ім нельга пракласці маршрут.
Коратка
- Знайдзіце кампанію на Google Картах, лепш — яе Профіль.
- Share → Embed a map → Copy HTML.
- Устаўце код у HTML-рэжыме рэдактара.
- Замяніце шырыню на 100% і пакіньце
loading="lazy".
- Для некалькіх кропак, падказкі адраса і разліку дастаўкі патрэбны ключ API.
Калі патрэбная карта з некалькімі кропкамі, падказка адраса ў формах або маршрут да кліента, мы можам падключыць Google Maps да сайта праз API: аформім доступ, абаронім ключ і абмяжуем выдаткі.
