Для кофейни, клиники, студии или торговой точки на ярмарке у страницы по ссылке из профиля есть одна особенно важная задача: помочь посетителю добраться до нужного места. Добавить карту на страницу Digily Link можно 3 способами. Выбор зависит от вашего тарифа и от того, что вам нужно: показать карту или дать кнопку для запуска навигации.
Вариант 1. Кнопка маршрута, открывающая приложение карт
Этот способ доступен на всех тарифах, включая Free, и именно он нужен большинству посетителей. На телефоне мало кто масштабирует карту пальцами. Обычно человек нажимает "Проложить маршрут" и ожидает, что навигация запустится сразу.
- Откройте Google Maps, найдите свою компанию, нажмите "Поделиться" и скопируйте ссылку.
- В панели управления создайте короткую ссылку, указав этот адрес как целевой, и включите настройку "автоматически открывать приложение на мобильном устройстве". Digily Link распознаёт ссылки Google Maps и Waze, поэтому на телефоне с установленным приложением короткая ссылка сразу открывает навигацию. В руководстве по глубоким ссылкам объясняется, почему это важно.
- Добавьте на страницу блок ссылки, вставьте короткую ссылку и назовите кнопку "Проложить маршрут".
Поскольку кнопка ведёт на короткую ссылку, нажатия учитываются в статистике. Если вы переедете, целевой адрес можно будет заменить.
Вариант 2. Встроенная карта с помощью блока iframe
Блок iframe доступен на тарифах Starter и Pro. Он показывает карту прямо на странице.
- Найдите нужное место в Google Maps, откройте меню "Поделиться" и перейдите на вкладку "Встраивание карт".
- Скопируйте HTML-код, предложенный Google. Вам нужен только адрес внутри src="…", который начинается с https://www.google.com/maps/embed. Если так извлечь адрес проще, вставьте весь фрагмент в Парсер URL.
- Добавьте на страницу блок iframe, вставьте этот адрес в поле URL и установите высоту около 300 пикселей.
Сразу под картой разместите кнопку маршрута из варианта 1. Карта покажет, где вы находитесь, а кнопка поможет до вас добраться.
Вариант 3. Пользовательский HTML для адаптивной карты
Блок пользовательского HTML доступен на тарифе Pro и даёт полный контроль над картой, в том числе позволяет сохранять её пропорции при любом размере экрана. Вставьте в блок следующий код и замените YOUR_EMBED_URL адресом со вкладки "Встраивание карт".
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px"><iframe src="YOUR_EMBED_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe></div>
Значение padding-bottom задаёт форму карты. 56,25% соответствует прямоугольнику 16:9, 75% создаёт более квадратный формат 4:3, а 100% даёт квадрат. Атрибут loading="lazy" не позволяет карте замедлять страницу до того, как посетитель прокрутит до неё. Если вы копируете код из другого источника, сначала приведите его в порядок с помощью HTML минимизатора, чтобы случайный перенос строки не нарушил работу блока.
Какой вариант выбрать
| Что вам нужно | Что использовать | Тариф |
|---|---|---|
| Запуск навигации одним нажатием | Кнопка маршрута с открытием приложения | Free и выше |
| Карта, видимая на странице | Блок iframe | Starter и Pro |
| Карта с произвольной формой и оформлением | Блок пользовательского HTML | Pro |
| Несколько адресов | Отдельный заголовок и кнопка маршрута для каждого адреса либо пользовательская карта Google My Maps, встроенная способом 2 или 3 | Зависит от используемых блоков |
Советы для местного бизнеса
- Укажите адрес и почтовый индекс в блоке абзаца над картой для тех, кто предпочитает вводить данные в своё приложение вручную.
- Добавьте блок часов работы, доступный на бесплатном тарифе, чтобы посетитель понимал, стоит ли отправляться к вам прямо сейчас.
- Оставьте на странице только одну карту. Две встроенные карты удвоят время загрузки, почти не принеся пользы.
- Напечатайте QR-код страницы для витрины и листовок. Подходящая структура страницы описана в материале о ссылке в био для малого бизнеса.
- Проверьте кнопку маршрута из встроенного браузера Instagram на iPhone и телефоне с Android. Проверка перенаправления URL покажет, как короткая ссылка работает на компьютере.
Временные точки, ярмарки и мероприятия
Если торговая точка каждые выходные переезжает, создавать новую карту каждый раз не нужно. Оставьте кнопку маршрута привязанной к короткой ссылке, а в пятницу замените целевой адрес на место работы в ближайшие выходные. Адрес страницы, QR-код на баннере и ссылка в профиле при этом не изменятся. На тарифах Starter и Pro для короткой ссылки также можно настроить расписание. Тогда в полночь субботний адрес автоматически сменится воскресным, и вам не придётся делать это вручную. Добавьте блок абзаца с датами, адресом и почтовым индексом для тех, кто планирует поездку заранее.
Apple Maps и Waze
Функция открытия приложений распознаёт адреса Google Maps и Waze. Если пользователь iPhone предпочитает Apple Maps, обычная ссылка на maps.apple.com с указанным адресом откроет Apple Maps на iPhone и веб-карту на других устройствах. Ссылки Apple работают так без дополнительных настроек. Две кнопки, "Google Maps" и "Apple Maps", подходят почти для любого телефона, а статистика нажатий покажет, какой вариант действительно выбирают ваши посетители.
Часто задаваемые вопросы
Нужен ли API-ключ Google Maps?
Нет. Код со вкладки "Встраивание карт" и общедоступную ссылку можно использовать бесплатно и без ключа. API-ключ нужен только разработчикам, которые создают собственное приложение с картами.
Можно ли показать на карте несколько меток?
Создайте в Google My Maps пользовательскую карту со всеми адресами, откройте к ней публичный доступ и вставьте её адрес в блок iframe или пользовательского HTML.
Встроенная карта замедляет загрузку страницы?
Немного, поэтому приведённый выше код использует отложенную загрузку. Если основная задача страницы состоит в том, чтобы помочь людям добраться до нужного места, кнопка маршрута важнее изображения карты.
Можно ли добавить карту на бесплатном тарифе?
Кнопку маршрута можно. Для блока iframe нужен тариф Starter, а для блока пользовательского HTML требуется Pro. Состав каждого тарифа указан на странице тарифов.
Что делать, если компания переехала?
Измените целевой адрес короткой ссылки, на которую ведёт кнопка маршрута, и замените адрес встроенной карты. Перепечатывать материалы не понадобится.
Финальная проверка
- Кнопка маршрута открывает приложение карт на телефоне и страницу с картой на компьютере.
- На встроенной карте стоит правильная метка, а сама карта помещается по ширине страницы на телефоне.
- На странице указаны адрес, почтовый индекс и часы работы.
- На странице размещена только одна карта.
- Вы проверили страницу во встроенном браузере Instagram, а не только в обычном браузере.
