Показать местоположение на карте: Google и Яндекс.Карты
Содержание
О проверке кода. Примеры не запускались, API-ключи не подключались — в отличие от материалов по Node.js с фактическим выводом. Код дан по документации Google Maps, Яндекс.Карт и MDN. Говорим прямо, а не ставим бейдж «проверено».
Задача «показать пользователя на карте» распадается на два независимых шага, и путаница между ними — источник большинства проблем.
Два шага, которые не надо смешивать
Шаг 1 — получить координаты. Это Geolocation API, встроенный в браузер. Ему не нужны ни Google, ни Яндекс, ни ключи, ни деньги.
Шаг 2 — показать их на карте. Вот здесь и появляются внешние сервисы, ключи и оплата.
// шаг 1: координаты — бесплатно, из браузера
navigator.geolocation.getCurrentPosition((position) => {
const { latitude, longitude } = position.coords;
// шаг 2: передаём их карте
showOnMap(latitude, longitude);
});
Практический вывод сразу: если вам нужны только координаты — например, найти ближайший пункт выдачи на своём сервере, — второй шаг не нужен вовсе. Карта нужна, только когда точку надо визуально показать.
Google Maps
<script async
src="https://maps.googleapis.com/maps/api/js?key=ВАШ_КЛЮЧ&callback=initMap">
</script>
function showOnMap(lat, lng) {
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat, lng },
zoom: 15,
});
new google.maps.marker.AdvancedMarkerElement({ map, position: { lat, lng } });
}
Что изменилось с 2017 года и важно знать:
- ключ обязателен и привязан к платёжному аккаунту;
- есть бесплатный месячный лимит, сверх него — оплата по числу загрузок карты;
- обычный
Markerобъявлен устаревшим — теперьAdvancedMarkerElement.
Яндекс.Карты
<script src="https://api-maps.yandex.ru/v3/?apikey=ВАШ_КЛЮЧ&lang=ru_RU"></script>
async function showOnMap(lat, lng) {
await ymaps3.ready;
const map = new ymaps3.YMap(document.getElementById('map'), {
location: { center: [lng, lat], zoom: 15 },
});
map.addChild(new ymaps3.YMapDefaultSchemeLayer());
map.addChild(new ymaps3.YMapMarker({ coordinates: [lng, lat] }));
}
Одна ловушка, на которой спотыкаются постоянно: у Яндекса координаты идут [долгота, широта], а Geolocation API отдаёт latitude, longitude. Порядок обратный — перепутаете, и метка окажется в другом полушарии.
Для российской аудитории Яндекс обычно точнее: адреса, организации, пробки. Google сильнее за пределами СНГ.
Главное изменение: карты стали платными
В 2017-м обе карты были практически бесплатны для обычного сайта. Сегодня — нет, и это меняет подход.
Google / Яндекс
Мощно, но платно
- Ключ + платёжный аккаунт
- Бесплатный лимит, дальше по тарифу
- Пробки, маршруты, организации
- Тяжёлый JS — сотни КБ
Статическая карта
Когда интерактив не нужен
- Просто картинка с меткой
- Ноль JavaScript, мгновенно
- Static Maps API (тоже с ключом)
- Хватает для «вот наш адрес»
OpenStreetMap + Leaflet
Бесплатная альтернатива
- Без ключа для базы
- Данные OSM, рендер Leaflet
- Легче коммерческих виджетов
- Пробок и маршрутов из коробки нет
Практическое правило: прежде чем тянуть интерактивный виджет за деньги, спросите — а нужен ли интерактив? Для «вот где мы находимся» достаточно статической картинки-карты или лёгкого Leaflet. Полноценная карта с пробками и маршрутами оправдана, когда это ядро продукта.
Производительность: карты тяжёлые
Библиотека карт — это сотни килобайт JavaScript. Подключённая в <head>, она тормозит первую отрисовку всей страницы ради блока, который пользователь, возможно, и не увидит.
// ❌ карта грузится всегда, даже если её не открыли
// <script src="...maps..."> в head
// ✅ грузим по требованию
button.addEventListener('click', async () => {
await import('./map-loader.js'); // подтягиваем карту только сейчас
showOnMap(lat, lng);
});
Тот же принцип ленивой загрузки, что и везде: не платите за то, что не показано. Особенно важно для Core Web Vitals — тяжёлый скрипт в критическом пути роняет метрики загрузки.
Что было на этой странице в 2017 году
Первая версия вышла 31 июля 2017 года и показывала связку Geolocation + карты Google и Яндекс, включая построение маршрутов. Схема «получить координаты → показать на карте» верна и сегодня.
Что изменилось радикально:
- Карты стали платными. В 2017-м пример работал без ключа или с бесплатным ключом «на всё»; сегодня оба сервиса требуют платёжный аккаунт и берут за запросы. Это перевернуло выбор: раньше вопрос был «Google или Яндекс», теперь — «а нужна ли вообще интерактивная карта».
- API обеих карт сменились. У Google устарел старый
Marker, у Яндекса вышла новая версия v3 с другим синтаксисом. Код 2017 года на актуальных версиях уже не запустится. - Про вес и ленивую загрузку не думали. Тогда пара сотен килобайт не пугала; сегодня это прямой удар по скорости.
Мы сохранили обе карты — по этому запросу приходят те, кому нужна именно интеграция, — но добавили то, чего в 2017-м не было: честный разговор про оплату, вес и альтернативы.
Смежные темы: Geolocation API без карт — как получить координаты; что такое JavaScript — браузерные API; промисы. Полный список — в уроках JavaScript.