Что такое Google Maps JavaScript API

Google Maps JavaScript API — это библиотека компании Google, предназначенная для встраивания интерактивных карт в веб-приложения и сайты с использованием JavaScript. API предоставляет программный интерфейс для отображения картографических данных, управления картой, работы с географическими объектами и интеграции геолокационных сервисов.

Библиотека позволяет не просто отображать карту, а создавать полноценные геоинформационные интерфейсы:

  • отображать карты различных типов;
  • управлять масштабом и положением карты;
  • размещать маркеры и подписи;
  • строить маршруты;
  • отображать полигоны и линии;
  • получать информацию о географических объектах;
  • работать с пользовательскими слоями;
  • создавать интерактивные элементы управления.

Google Maps JavaScript API является частью платформы Google Maps Platform и тесно интегрируется с другими сервисами экосистемы Google Maps.

Основные возможности библиотеки

Отображение интерактивной карты

Базовая функция API — создание карты внутри HTML-элемента.

После инициализации разработчик получает объект карты, который позволяет программно изменять практически все её параметры.

Пример создания карты:

<div id="map"></div>

<script>
function initMap() {
    const map = new google.maps.Map(
        document.getElementById("map"),
        {
            center: {
                lat: 55.7558,
                lng: 37.6176
            },
            zoom: 10
        }
    );
}
</script>

После создания карты становятся доступны все остальные возможности API.

Работа с центром карты

Карта всегда имеет центральную точку.

Для управления центром используются географические координаты:

map.setCenter({
    lat: 59.9386,
    lng: 30.3141
});

Получение текущего центра:

const center = map.getCenter();

console.log(center.lat());
console.log(center.lng());

Это позволяет динамически перемещать карту при действиях пользователя или изменении данных приложения.

Масштабирование

Уровень приближения задаётся параметром zoom.

Пример:

const map = new google.maps.Map(element, {
    center: {
        lat: 55.7558,
        lng: 37.6176
    },
    zoom: 12
});

Изменение масштаба:

map.setZoom(15);

Получение текущего масштаба:

const zoom = map.getZoom();

Чем больше значение, тем сильнее приближение.

Типы карт

Google Maps поддерживает несколько режимов отображения.

Основные типы:

Тип Описание
roadmap Стандартная дорожная карта
satellite Спутниковые снимки
hybrid Спутниковые снимки с подписями
terrain Рельеф местности

Пример:

const map = new google.maps.Map(element, {
    center: {
        lat: 55.7558,
        lng: 37.6176
    },
    zoom: 10,
    mapTypeId: "satellite"
});

Переключение типа карты возможно в любой момент работы приложения.

Архитектура Google Maps JavaScript API

В основе библиотеки лежит объектная модель.

Наиболее важные классы:

Класс Назначение
Map Карта
Marker Маркер
InfoWindow Информационное окно
Polyline Ломаная линия
Polygon Полигон
Circle Окружность
Rectangle Прямоугольник
DirectionsService Построение маршрутов
Geocoder Геокодирование
StreetViewPanorama Панорамы улиц

Большинство операций выполняется через создание экземпляров этих классов.

Координаты и географические данные

Широта и долгота

Google Maps использует систему координат WGS84.

Каждая точка определяется двумя значениями:

{
    lat: 55.7558,
    lng: 37.6176
}

где:

  • lat — широта;
  • lng — долгота.

Пример координат некоторых городов:

Город Широта Долгота
Москва 55.7558 37.6176
Санкт-Петербург 59.9386 30.3141
Алматы 43.2389 76.8897
Астана 51.1694 71.4491

Объект LatLng

Для хранения координат используется специальный класс.

const position =
    new google.maps.LatLng(
        55.7558,
        37.6176
    );

Получение значений:

position.lat();
position.lng();

Использование класса обеспечивает корректную обработку координат внутри API.

Событийная модель

Google Maps активно использует события.

Каждый объект может генерировать различные события:

  • click;
  • dblclick;
  • drag;
  • dragstart;
  • dragend;
  • zoom_changed;
  • center_changed;
  • bounds_changed;
  • idle.

Пример обработки клика:

map.addListener("click", (event) => {
    console.log(
        event.latLng.lat(),
        event.latLng.lng()
    );
});

При щелчке по карте будут получены координаты выбранной точки.

Маркеры

Назначение маркеров

Маркер представляет собой визуальную отметку на карте.

Пример:

const marker =
    new google.maps.Marker({
        position: {
            lat: 55.7558,
            lng: 37.6176
        },
        map: map
    });

Маркеры используются для отображения:

  • офисов;
  • магазинов;
  • складов;
  • объектов недвижимости;
  • пунктов выдачи заказов;
  • достопримечательностей.

Настройка маркера

Добавление заголовка:

const marker =
    new google.maps.Marker({
        position: position,
        map: map,
        title: "Главный офис"
    });

Создание перетаскиваемого маркера:

const marker =
    new google.maps.Marker({
        position: position,
        map: map,
        draggable: true
    });

Отслеживание завершения перемещения:

marker.addListener(
    "dragend",
    () => {
        console.log(
            marker.getPosition()
        );
    }
);

Информационные окна

Информационное окно отображает дополнительную информацию о выбранном объекте.

Создание окна:

const infoWindow =
    new google.maps.InfoWindow({
        content: `
            <h3>Москва</h3>
            <p>Столица России</p>
        `
    });

Открытие по нажатию на маркер:

marker.addListener(
    "click",
    () => {
        infoWindow.open({
            anchor: marker,
            map
        });
    }
);

Информационные окна часто используются для вывода:

  • адресов;
  • контактных данных;
  • фотографий;
  • описаний объектов;
  • ссылок на карточки товаров или услуг.

Геометрические объекты

Линии

Ломаные линии создаются классом Polyline.

Пример:

const line =
    new google.maps.Polyline({
        path: [
            {lat: 55.75, lng: 37.61},
            {lat: 55.80, lng: 37.70},
            {lat: 55.85, lng: 37.80}
        ],
        strokeColor: "#ff0000",
        strokeWeight: 3,
        map: map
    });

Применяются для отображения:

  • маршрутов;
  • треков GPS;
  • транспортных путей;
  • инженерных коммуникаций.

Полигоны

Полигон представляет собой замкнутую область.

const polygon =
    new google.maps.Polygon({
        paths: [
            {lat: 55.70, lng: 37.50},
            {lat: 55.80, lng: 37.70},
            {lat: 55.65, lng: 37.80}
        ],
        fillColor: "#00ff00",
        fillOpacity: 0.4,
        map: map
    });

Полигоны позволяют отображать:

  • границы территорий;
  • земельные участки;
  • административные зоны;
  • районы доставки.

Окружности

Для отображения радиусов используется класс Circle.

const circle =
    new google.maps.Circle({
        center: {
            lat: 55.7558,
            lng: 37.6176
        },
        radius: 5000,
        map: map
    });

Радиус задаётся в метрах.

Типичные сценарии:

  • зоны обслуживания;
  • радиусы доставки;
  • охранные территории;
  • области поиска.

Геокодирование

Прямое геокодирование

Преобразование адреса в координаты.

const geocoder =
    new google.maps.Geocoder();

geocoder.geocode(
    {
        address: "Москва, Красная площадь"
    },
    (results, status) => {
        console.log(results);
    }
);

Результатом являются координаты найденного объекта.

Обратное геокодирование

Преобразование координат в адрес.

geocoder.geocode(
    {
        location: {
            lat: 55.7558,
            lng: 37.6176
        }
    },
    (results, status) => {
        console.log(
            results[0].formatted_address
        );
    }
);

Такая операция часто используется в сервисах доставки и навигации.

Маршрутизация

Для построения маршрутов используются два основных класса:

google.maps.DirectionsService
google.maps.DirectionsRenderer

Сервис вычисляет маршрут:

const directionsService =
    new google.maps.DirectionsService();

Отрисовщик отображает результат:

const directionsRenderer =
    new google.maps.DirectionsRenderer();

directionsRenderer.setMap(map);

Пример запроса:

directionsService.route({
    origin: "Москва",
    destination: "Тула",
    travelMode: "DRIVING"
});

Поддерживаются различные способы передвижения:

  • автомобиль;
  • пешком;
  • велосипед;
  • общественный транспорт.

Панорамы улиц

Google Maps предоставляет доступ к сервису Street View.

Создание панорамы:

const panorama =
    new google.maps.StreetViewPanorama(
        document.getElementById(
            "street-view"
        ),
        {
            position: {
                lat: 55.7558,
                lng: 37.6176
            }
        }
    );

Панорама представляет собой сферическое изображение местности, позволяющее осматривать окружающее пространство на 360 градусов.

Пользовательские элементы управления

API позволяет создавать собственные кнопки и панели управления.

Пример:

const button =
    document.createElement("button");

button.textContent =
    "Перейти в центр";

button.addEventListener(
    "click",
    () => {
        map.setCenter({
            lat: 55.7558,
            lng: 37.6176
        });
    }
);

map.controls[
    google.maps.ControlPosition
        .TOP_LEFT
].push(button);

Подобным образом реализуются:

  • фильтры объектов;
  • переключатели слоёв;
  • кнопки поиска;
  • элементы навигации.

Асинхронная модель загрузки

Google Maps JavaScript API загружается из внешнего скрипта.

Современный способ подключения использует динамический импорт библиотек.

Пример:

const { Map } =
    await google.maps.importLibrary(
        "maps"
    );

Преимущества подхода:

  • ускорение загрузки страницы;
  • подключение только необходимых модулей;
  • уменьшение объёма загружаемого кода;
  • повышение производительности приложения.

Типичные области применения

Электронная коммерция

Использование карт для:

  • поиска магазинов;
  • отображения пунктов выдачи;
  • расчёта маршрутов доставки;
  • определения зоны обслуживания.

Логистика

Использование API позволяет:

  • отслеживать транспорт;
  • строить маршруты;
  • отображать склады;
  • визуализировать перемещение грузов.

Сервисы такси

На основе Google Maps реализуются:

  • выбор точки посадки;
  • построение маршрута;
  • отслеживание автомобиля;
  • расчёт расстояния.

Недвижимость

Карты помогают отображать:

  • расположение объектов;
  • инфраструктуру района;
  • транспортную доступность;
  • границы участков.

Туризм

Применение включает:

  • интерактивные путеводители;
  • карты достопримечательностей;
  • туристические маршруты;
  • панорамы Street View.

Преимущества Google Maps JavaScript API

Высокая детализация карт

Сервис предоставляет актуальные картографические данные для большинства стран мира.

Большое количество встроенных сервисов

Платформа объединяет карты, маршруты, геокодирование, поиск мест, панорамы и геолокационные инструменты.

Гибкость настройки

Практически любой элемент карты может быть изменён программно.

Хорошая интеграция с JavaScript

API разработан специально для веб-приложений и органично вписывается в современные фронтенд-фреймворки:

  • React;
  • Vue;
  • Angular;
  • Svelte;
  • Next.js.

Развитая событийная система

События позволяют создавать сложные интерактивные сценарии взаимодействия с картой.

Масштабируемость

Одна и та же библиотека подходит как для небольших сайтов, так и для крупных геоинформационных платформ с тысячами объектов на карте.

Оглавление