Привязка карты к Google¶
Привязка карты к Google — это процесс размещения интерактивной карты на веб-странице с использованием сервисов Google, прежде всего Google Maps Platform (Google Карты). Под привязкой понимается встраивание готовой карты через JavaScript API, Google Maps Embed API или публикацию карты из Google Мой Маршрут (My Maps) с последующим получением HTML-кода для вставки на сайт. Результат — интерактивная карта с маркерами, маршрутами и панорамами, которую посетитель сайта может масштабировать и перемещать.
¶Сервисы Google для привязки карт
Google предоставляет несколько независимых инструментов для размещения карт:
| Сервис | Назначение | Способ встраивания |
|---|---|---|
| Google Maps Platform (JavaScript API) | Полноценная интерактивная карта с кастомизацией | Скрипт <script> и вызов new google.maps.Map() |
| Google Maps Embed API | Простое встраивание без ключа API | iframe с ссылкой на maps.google.com/maps |
| Google My Maps (Мой Маршрут) | Пользовательские карты с собственными слоями и метками | Публикация карты и вставка iframe-кода |
| Google Maps URLs API | Генерация ссылок для открытия в приложении Google Карты | Прямая ссылка https://www.google.com/maps/...` |
¶Привязка через Embed API
Самый простой способ — вставить iframe с Embed API. Ключ API для этого способа не требуется. Пример кода:
``html <iframe src="https://www.google.com/maps/embed?pb=..."; width="600" height="450" style="border:0" allowfullscreen loading="lazy"> </iframe> ``
Код pb=... формируется на странице «Поделиться» → «Встроить карту» в интерфейсе Google Карт. Ограничение Embed API — отсутствие собственных маркеров и обработчиков событий; доступны только стандартные элементы Google.
¶Привязка через JavaScript API
Для полноценной интеграции используется Google Maps JavaScript API. Порядок действий:
- Создание проекта в Google Cloud Console и включение биллинга.
- Получение API-ключа и ограничение его по доменам (HTTP referrer).
- Подключение библиотеки на странице:
``html <script async src="https://maps.googleapis.com/maps/api/js?key=ВАШ_КЛЮЧ&callback=initMap">; </script> ``
- Инициализация карты:
``javascript function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 55.7558, lng: 37.6173 }, zoom: 12, }); new google.maps.Marker({ position: { lat: 55.7558, lng: 37.6173 }, map: map, title: "Москва", }); } ``
Такой подход позволяет добавлять собственные маркеры, слои, направления, слушатели событий и стилизовать карту под дизайн сайта.
¶Привязка карты из Google My Maps
Для пользователей без навыков программирования предназначен сервис Google My Maps. Карта создаётся в браузере: добавляются метки, линии, области, импортируются данные из CSV или XLSX. После создания карта публикуется, и в разделе «Поделиться» → «Встроить на мой сайт» генерируется iframe-код, который вставляется в HTML страницы. Ограничение — публичная доступность: закрытые карты встроить нельзя.
¶Требования и ограничения
- API-ключ и биллинг. JavaScript API и Embed API с ключом требуют подключённого аккаунта Google Cloud с привязанной платёжной картой. У Google Maps Platform есть бесплатный месячный кредит (по состоянию на 2024 год — 200 $), после чего тарификация идёт за каждую загрузку карт и запросы геокодирования.
- Ограничение по доменам. Ключ следует ограничить списком доменов, иначе его могут использовать третьи лица.
- Согласие с условиями. Использование карт Google на коммерческих сайтах регулируется условиями Google Maps Platform и может требовать отображения логотипа и атрибуции.
- Конфиденциальность. По умолчанию Google собирает данные о пользователях, открывших карту; для сайтов, работающих с аудиторией из ЕАЭС, рекомендуется использовать режим согласия на обработку cookie.
¶Альтернативы
Если условия Google не подходят, распространены OpenStreetMap с библиотекой Leaflet или Mapbox. Оба решения бесплатны для базового использования и не требуют платёжной карты, но уступают Google по детальности картографических данных в ряде регионов.
Источники:
- Документация Google Maps Platform (developers.google.com/maps)
- Справка Google My Maps (support.google.com/mymaps)
- Условия использования Google Maps Platform