Можно ли сделать на картах чтобы человек позвонил прямо сейчас

Почему именно «Позвонить сейчас»?

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

Техническая реализация: как это работает?

Принцип работы ссылки `tel:`

Для того чтобы пользователь мог позвонить «прямо сейчас», в карте необходимо разместить tel:-ссылку. При её нажатии мобильное устройство открывает приложение телефона с предзаполненным номером.

Плюсы: простота, работает в любой ОС, не требует дополнительных разрешений.
Минусы: пользователь должен подтвердить действие (в большинстве браузеров нет автоматического дозвона).

Использование API карт

Большинство популярных картовых сервисов предоставляют API, через которые можно добавить собственный маркер с кнопкой «Позвонить». Рассмотрим два самых популярных варианта.

Google Maps JavaScript API

const map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: 55.7558, lng: 37.6176},
 zoom: 14
});

const content = `
 <div style="font-family:Arial,sans-serif">
 <h3>Кофейня «Теплый уголок»</h3>
 <p>Телефон: <a href="tel:+7 -951234567">+7 (495) -23‑45‑67</a></p>
 <button onclick="window.location.href='tel:+7 -951234567'">Позвонить сейчас</button>
 </div>`;

const infowindow = new google.maps.InfoWindow({content});

const marker = new google.maps.Marker({
 position: {lat: 55.7558, lng: 37.6176},
 map,
 title: 'Кофейня «Теплый уголок»'
});

marker.addListener('click',  => {
 infowindow.open(map, marker);
});

В примере создаётся маркер, при клике по которому открывается информационное окно с tel:-ссылкой и кнопкой «Позвонить сейчас». Всё, что нужно – указать корректный номер в международном формате.

Yandex.Maps API

ymaps.ready(init);
function init  {
 const myMap = new ymaps.Map('map', {
 center: [55.751244, 37.618423],
 zoom: 14
 });

 const myPlacemark = new ymaps.Placemark(
 [55.751244, 37.618423],
 {
 balloonContentHeader: '<h3>Ресторан «Вкусный мир»</h3>',
 balloonContentBody: `
 Телефон: <a href="tel:+7 -951234568">+7 (495) -23‑45‑68</a><br>
 <button onclick="window.location.href='tel:+7 -951234568'">Позвонить сейчас</button>
 `
 }, {preset: 'islands#redDot'}
 );

 myMap.geoObjects.add(myPlacemark);
}

Yandex.Maps использует объект Placemark и всплывающие балуны, в которые тоже можно вставить tel:-ссылку.

OpenStreetMap + Leaflet

Если вы предпочитаете открытые данные, то комбинация Leaflet и OSM‑тайлов позволяет добавить кнопку «Позвонить» без привязки к коммерческим сервисам.

[quizle name="67fdd4c2c9efc-2-3"]

const map = L.map('map').setView([55.75, 37.61], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const marker = L.marker([55.75, 37.61]).addTo(map);
marker.bindPopup(`
 <strong>Салон красоты «Эстетика»</strong><br>
 Телефон: <a href="tel:+7 -951234569">+7 (495) -23‑45‑69</a><br>
 <button onclick="window.location.href='tel:+7 -951234569'">Позвонить сейчас</button>
`);

Ограничения и нюансы

Права доступа. На большинстве платформ tel:-ссылка требует подтверждения от пользователя. Автоматически «нажать» кнопку без согласия запрещено политикой Google/Apple.
Точность номера. Номер должен быть в международном формате (+7 для России), иначе звонок может не пройти.
Проверка на спам. Если в карте размещено слишком много «кнопок звонка», сервисы могут пометить ваш контент как рекламный.
Платформенные особенности. На iOS Safari и Android Chrome tel: работает одинаково, но в десктопных браузерах ссылка открывает приложение «Skype», «Telegram» или другое установленное средство связи.
Синтаксический нюанс «можно ли». В русском языке можно используется при запросе разрешения («Можно позвонить сейчас?»). В технической документации часто пишут «Можно ли добавить кнопку…», что подчеркивает возможность реализации.

Как правильно оформить запрос «Можно ли…» в пользовательском интерфейсе?

Если вы хотите спросить у пользователя, готов ли он совершить звонок, используйте в интерфейсе фразу:

Можно ли позвонить сейчас?

Эта формулировка соответствует нормативам русского языка: можно – глагол‑модальное слово, выражающее разрешение.

Пошаговый чек‑лист для разработчиков

Подготовьте номер телефона. Убедитесь, что он указан в международном формате и проверен на работоспособность.
Выберите карту. Google Maps, Yandex.Maps или Leaflet + OSM – в зависимости от целей проекта.
Сгенерируйте tel:-ссылку. Пример: tel:+7 -951234567.
Тестируйте на разных устройствах. Проверьте работу как в мобильных браузерах, так и в десктопных.
Обеспечьте конфиденциальность. Не храните номера в открытом виде без согласия владельца.
Опубликуйте и проанализируйте метрики. Смотрите, сколько пользователей действительно нажимают кнопку «Позвонить сейчас».

Примеры реального применения

Службы такси (Яндекс.Такси, Uber) показывают кнопку «Позвонить водителю» в деталях заказа.
Сервисы доставки еды (Delivery Club, Яндекс.Еда) позволяют клиенту сразу связаться с рестораном.
Бизнес‑каталоги (2ГИС, Google My Business) автоматически выводят кнопку «Позвонить», если в профиле указан номер.

Ответ на главный вопрос прост: да, можно добавить кнопку «Позвонить сейчас» в карты. Для этого достаточно использовать tel:-ссылку в сочетании с API выбранного картографического сервиса. При этом важно учитывать ограничения платформ, соблюдать правила конфиденциальности и правильно формулировать запросы к пользователю («Можно ли позвонить сейчас?»).

Если вы только начинаете работу с картами, советуем стартовать с бесплатного Leaflet и OSM, а затем, по мере роста проекта, перейти к более мощным решениям Google или Yandex.

Дата публикации: