Vanilla JavaScript подход

Подключение осуществляется через загрузку внешнего скрипта с обязательным указанием ключа API и функции обратного вызова инициализации карты.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Google Maps Vanilla JS</title>
  <style>
    #map {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async
    defer>
  </script>

  <script>
    function initMap() {
      const center = { lat: 55.751244, lng: 37.618423 };

      const map = new google.maps.Map(document.getElementById("map"), {
        center,
        zoom: 10,
      });
    }
  </script>
</body>
</html>

Ключевые особенности загрузки:

  • async и defer обеспечивают неблокирующую загрузку скрипта
  • callback=initMap запускает инициализацию после полной загрузки API
  • объект google.maps становится доступным глобально

Инициализация карты и базовая конфигурация

Объект карты создаётся через конструктор google.maps.Map, который принимает DOM-элемент и объект настроек.

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 51.5074, lng: -0.1278 },
  zoom: 12,
  mapTypeId: "roadmap"
});

Основные параметры:

  • center — координаты центра карты
  • zoom — масштаб отображения
  • mapTypeId — тип карты (roadmap, satellite, hybrid, terrain)

Поведение карты определяется объектом MapOptions, который поддерживает сотни параметров: отключение UI, управление жестами, ограничения перемещения.

Работа с координатами и объектом LatLng

Координаты задаются через объект { lat, lng }, однако API также поддерживает google.maps.LatLng.

const position = new google.maps.LatLng(48.8566, 2.3522);

map.setCenter(position);

Использование LatLng оправдано при сложных вычислениях и взаимодействии с сервисами API, так как объект содержит методы:

  • lat()
  • lng()

Маркеры и кастомные точки на карте

Добавление маркеров осуществляется через google.maps.Marker.

const marker = new google.maps.Marker({
  position: { lat: 55.751244, lng: 37.618423 },
  map,
  title: "Москва"
});

Расширенные настройки маркеров:

  • кастомные иконки
  • анимации
  • перетаскивание
const marker = new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map,
  draggable: true,
  animation: google.maps.Animation.DROP,
  icon: "https://example.com/icon.png"
});

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

Информационные окна используются для отображения HTML-контента.

const infoWindow = new google.maps.InfoWindow({
  content: "<div><strong>Точка интереса</strong><br>Описание объекта</div>"
});

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

Особенности:

  • поддержка HTML-разметки
  • привязка к маркеру
  • динамическое обновление содержимого

События и взаимодействие с картой

Система событий построена на методе addListener.

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

Часто используемые события:

  • click
  • drag
  • zoom_changed
  • idle

Пример отслеживания изменения центра:

map.addListener("center_changed", () => {
  const center = map.getCenter();
  console.log(center.toJSON());
});

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

Геокодирование выполняется через сервис Geocoder.

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

geocoder.geocode({ address: "Paris" }, (results, status) => {
  if (status === "OK") {
    map.setCenter(results[0].geometry.location);
  }
});

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

geocoder.geocode({ location: { lat: 48.8566, lng: 2.3522 } }, (results, status) => {
  if (status === "OK") {
    console.log(results[0].formatted_address);
  }
});

Работа с полилиниями

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

const path = [
  { lat: 55.75, lng: 37.61 },
  { lat: 55.76, lng: 37.62 }
];

const polyline = new google.maps.Polyline({
  path,
  geodesic: true,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2,
  map
});

Полилинии поддерживают:

  • динамическое обновление пути
  • интерактивное редактирование
  • стилизацию

Полигоны и области

Полигоны используются для выделения зон.

const polygon = new google.maps.Polygon({
  paths: [
    { lat: 55.75, lng: 37.61 },
    { lat: 55.76, lng: 37.62 },
    { lat: 55.74, lng: 37.63 }
  ],
  strokeColor: "#0000FF",
  fillColor: "#0000FF",
  fillOpacity: 0.3,
  map
});

Особенности:

  • замкнутая геометрия
  • поддержка дыр (holes)
  • интерактивные события

Управление UI и контролами

Интерфейс карты может быть полностью переопределён.

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 55.751244, lng: 37.618423 },
  zoom: 10,
  disableDefaultUI: true,
  zoomControl: true
});

Контролы:

  • zoomControl
  • streetViewControl
  • fullscreenControl
  • mapTypeControl

Стилизация карты

Стили применяются через массив JSON-объектов.

const styledMap = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 55.751244, lng: 37.618423 },
  zoom: 10,
  styles: [
    {
      featureType: "water",
      elementType: "geometry",
      stylers: [{ color: "#000000" }]
    },
    {
      featureType: "road",
      stylers: [{ visibility: "simplified" }]
    }
  ]
});

Стили позволяют:

  • скрывать элементы карты
  • изменять цветовую схему
  • упрощать визуальную нагрузку

Работа с несколькими маркерами и оптимизация отображения

При большом количестве маркеров применяется кластеризация.

const markers = locations.map((loc) => {
  return new google.maps.Marker({
    position: loc,
    map
  });
});

Для оптимизации:

  • ограничение количества DOM-объектов
  • использование кластеризаторов
  • динамическая подгрузка данных по границам карты

Bounds и работа с областью видимости

Объект LatLngBounds управляет видимой областью.

const bounds = new google.maps.LatLngBounds();

locations.forEach((loc) => bounds.extend(loc));

map.fitBounds(bounds);

Функциональность:

  • автоматическое масштабирование
  • подгонка под набор точек
  • контроль видимой области

Асинхронные сценарии и управление загрузкой API

При архитектуре Vanilla JavaScript важна корректная работа с загрузкой API без фреймворков.

window.initMap = function () {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 0, lng: 0 },
    zoom: 2
  });
};

Глобальная регистрация callback необходима, так как API вызывает функцию из глобального контекста window.

Ограничения и особенности работы в чистом JavaScript

При отсутствии сборщиков и модульных систем проявляются особенности:

  • глобальное пространство имён google
  • отсутствие tree-shaking
  • обязательная загрузка через <script>
  • зависимость от callback-механизма

При этом Vanilla-подход сохраняет:

  • минимальную сложность интеграции
  • отсутствие зависимостей
  • прямой доступ к API без абстракций

Геообъекты и работа с пользовательскими слоями

API поддерживает добавление пользовательских слоёв данных.

const dataLayer = new google.maps.Data();
dataLayer.setMap(map);

Возможности:

  • загрузка GeoJSON
  • стилизация объектов
  • обработка событий на геометрии
dataLayer.addGeoJson(geoJsonData);

Работа с направлением маршрутов (Directions)

Сервис маршрутизации строится через DirectionsService и DirectionsRenderer.

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

directionsRenderer.setMap(map);

directionsService.route(
  {
    origin: "Moscow",
    destination: "Saint Petersburg",
    travelMode: google.maps.TravelMode.DRIVING
  },
  (response, status) => {
    if (status === "OK") {
      directionsRenderer.setDirections(response);
    }
  }
);

Функциональные элементы:

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