Эта страница переведена с помощью Cloud Translation API.

Добавьте карту на свой сайт (JavaScript)

1. Прежде чем начать

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

Что вы построите

В этой лабораторной работе вы создадите простое веб-приложение, которое выполняет следующие функции:

Загружает API JavaScript Карт
Отображает карту с центром в Сиднее, Австралия.
Отображает специальные маркеры популярных достопримечательностей Сиднея.
Реализует кластеризацию маркеров
Позволяет пользователю взаимодействовать с картой, центрируя ее и рисуя круг при нажатии на маркер.

Чему вы научитесь

Начало работы с платформой Google Карт
Динамическая загрузка JavaScript API Карт из кода JavaScript
Загрузка карты
Использование маркеров, пользовательских маркеров и кластеризации маркеров
Работа с системой событий Maps JavaScript API для обеспечения взаимодействия с пользователем
Динамическое управление картой
Рисунок на карте

2. Предпосылки

Для выполнения этой практической работы вам потребуется ознакомиться с приведенными ниже пунктами. Если вы уже знакомы с платформой Google Карт, переходите сразу к практической работе!

Требуемые продукты платформы Google Maps

В этой лабораторной работе вы будете использовать следующие продукты платформы Google Maps:

API JavaScript Карт
Библиотека кластеризации маркеров с открытым исходным кодом MarkerClustererPlus

Другие требования для этой лабораторной работы

Для выполнения этой лабораторной работы вам понадобятся следующие учетные записи, сервисы и инструменты:

Учетная запись Google Cloud Platform с включенным выставлением счетов
Ключ API платформы Google Карт с включенным API JavaScript Карт
Базовые знания JavaScript, HTML и CSS
Node.js установлен на вашем компьютере
Текстовый редактор или IDE по вашему выбору

Начните работу с платформой Google Карт

Если вы ранее не использовали платформу Google Карт, следуйте руководству «Начало работы с платформой Google Карт» или посмотрите плейлист «Начало работы с платформой Google Карт», чтобы выполнить следующие шаги:

Создайте платежный аккаунт.
Создать проект.
Включите API и SDK платформы Google Карт (перечислены в предыдущем разделе).
Сгенерируйте ключ API.

3. Подготовка

Настройте платформу Google Карт

Если у вас еще нет учетной записи Google Cloud Platform и проекта с включенным выставлением счетов, ознакомьтесь с руководством « Начало работы с Google Maps Platform», чтобы создать учетную запись для выставления счетов и проект.

В Cloud Console щелкните раскрывающееся меню проектов и выберите проект, который вы хотите использовать для этой кодовой лаборатории.

Включите API и SDK платформы Google Карт, необходимые для этой лабораторной работы, в Google Cloud Marketplace . Для этого следуйте инструкциям в этом видео или в этой документации .
Сгенерируйте ключ API на странице «Учётные данные» в Cloud Console. Вы можете следовать инструкциям в этом видео или в этой документации . Для всех запросов к платформе Google Карт требуется ключ API.

Настройка Node.js

Если у вас его еще нет, перейдите по ссылке https://nodejs.org/ , чтобы загрузить и установить среду выполнения Node.js на свой компьютер.

Node.js поставляется с менеджером пакетов npm, который вам понадобится для установки зависимостей для этой лабораторной работы.

Настройка шаблона стартового проекта

Прежде чем приступить к работе над этой лабораторной работой, выполните следующие действия, чтобы загрузить шаблон начального проекта, а также полный код решения:

Загрузите или сделайте форк репозитория GitHub для этой лабораторной работы по адресу https://github.com/googlecodelabs/maps-platform-101-js .

Стартовый проект находится в каталоге /starter и включает в себя базовую файловую структуру, необходимую для выполнения лабораторной работы. Всё необходимое для работы находится в каталоге /starter/src . 2. После загрузки стартового проекта выполните npm install в каталоге /starter . Это установит все необходимые зависимости, перечисленные в package.json . 3. После установки зависимостей выполните команду npm start в этом каталоге.

Стартовый проект настроен для использования webpack-dev-server, который компилирует и запускает написанный вами код локально. webpack-dev-server также автоматически перезагружает ваше приложение в браузере каждый раз, когда вы вносите изменения в код.

Если вы хотите увидеть полный работающий код решения, вы можете выполнить описанные выше шаги по настройке в каталоге /solution .

4. Загрузите API JavaScript Карт

Прежде чем начать, убедитесь, что вы выполнили шаги, описанные в разделе «Настройка» . Всё готово? Итак, пора создать своё первое веб-приложение на платформе Google Карт!

Основой использования платформы Google Карт для веб-приложений является API JavaScript для Карт. Этот API предоставляет JavaScript-интерфейс для использования всех функций платформы Google Карт, включая карту, маркеры, инструменты рисования и другие сервисы платформы Google Карт, такие как Places.

Если у вас есть опыт работы с Maps JavaScript API, вы, возможно, знакомы с его загрузкой путем вставки тега script в HTML-файл следующим образом:

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

Это по-прежнему вполне допустимый способ загрузки API, но в современном JavaScript зависимости обычно динамически подключаются из кода. Чтобы реализовать эквивалент тега script , приведённого выше, используйте модуль @googlemaps/js-api-loader . Загрузчик JS API уже включён в зависимости файла package.json проекта, поэтому он был установлен при выполнении команды npm install ранее.

Чтобы использовать JS API Loader, выполните следующие действия:

Откройте /src/app.js . В этом файле вы будете выполнять всю работу по этой лабораторной работе.
Импортируйте класс Loader из @googlemaps/js-api-loader.

Добавьте следующее в начало app.js :
```
 import { Loader } from '@googlemaps/js-api-loader';
```
Создайте объект apiOptions .

Классу Loader требуется JSON-объект, который определяет различные параметры загрузки Maps JavaScript API, включая ваш ключ API платформы Google Карт, версию API, которую вы хотите загрузить, и любые дополнительные библиотеки, предоставляемые Maps JS API, которые вы хотите загрузить. Для целей этой практической работы вам нужно указать только ключ API, добавив следующее в app.js :
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Создайте экземпляр Loader и передайте ему apiOptions .
```
 const loader = new Loader(apiOptions);
```
Загрузите Maps JS API.

Чтобы загрузить API, вызовите load() для экземпляра Loader . Загрузчик JS API возвращает обещание, которое выполняется после загрузки API и готовности к использованию. Добавьте следующую заглушку для загрузки API и обработки обещания:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

Если всё прошло успешно, вы увидите запись console.log в консоли браузера. В Chrome это дополнительное окно можно открыть, перейдя в меню «Вид» -> «Разработчик» -> «Консоль Javascript» .

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

Ваш файл app.js должен выглядеть примерно так:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.load().then(() => {
      console.log('Maps JS API Loaded');
    });

Теперь, когда API JavaScript Карт загружен, на следующем шаге вы загрузите карту.

5. Отобразить карту

Пришло время показать вашу первую карту!

Наиболее часто используемая часть JavaScript API Карт — это класс google.maps.Map , позволяющий создавать экземпляры карт и управлять ими. Посмотрите, как это реализовано, создав новую функцию displayMap() .

Определите настройки вашей карты.

API JavaScript Карт поддерживает множество различных настроек для карты, но обязательными являются только два:
- center : задает широту и долготу центра карты.
- zoom : устанавливает начальный уровень масштабирования карты.
Используйте следующий код, чтобы центрировать карту на Сиднее, Австралия, и задайте уровень масштабирования 14, что является как раз подходящим уровнем масштабирования для отображения центра города.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
Получите div , в котором карта должна быть внедрена в DOM.

Прежде чем отображать карту, необходимо указать Maps JavaScript API, где именно на странице она должна отображаться. Если вы взглянете на index.html , то увидите, что там уже есть div , который выглядит следующим образом:
```
 <div id="map"></div>
```
Чтобы указать Maps JavaScript API, куда вы хотите внедрить карту, используйте document.getElementById для получения ее ссылки DOM:
```
 const mapDiv = document.getElementById('map');
```
Создайте экземпляр google.maps.Map .

Чтобы запросить у Maps JavaScript API создание новой карты, которую можно отобразить, создайте экземпляр google.maps.Map и передайте ему mapDiv и mapOptions . Вы также возвращаете экземпляр Map из этой функции, чтобы использовать его в дальнейшем:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Покажи карту!

После того как вы определите всю логику для создания экземпляра карты, все, что останется, — это вызвать displayMap() из обработчика обещаний JS API, чтобы он вызывался после загрузки Maps JavaScript API:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

Теперь в вашем браузере должна появиться красивая карта Сиднея:

Напомним, что на этом этапе вы определили параметры отображения карты, создали новый экземпляр карты и внедрили его в DOM.

Ваша функция displayMap() должна выглядеть примерно так:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. Облачная стилизация карты (необязательно)

Вы можете настроить стиль своей карты, используя облачный стиль карт .

Создать идентификатор карты

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

Создайте идентификатор карты.
Свяжите идентификатор карты со стилем карты.

Добавление идентификатора карты в ваше приложение

Чтобы использовать созданный вами идентификатор карты, измените функцию displayMap в файле app.js и передайте идентификатор вашей карты в свойство mapId объекта mapOptions .

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

После того как вы это сделаете, вы увидите выбранный вами стиль на карте!

7. Добавьте маркеры на карту.

Разработчики используют JavaScript API Карт для множества задач, но размещение маркеров на карте, безусловно, является самым популярным. Маркеры позволяют отображать определённые точки на карте и являются распространённым элементом пользовательского интерфейса для взаимодействия с пользователем. Если вы уже пользовались Google Картами, то, вероятно, знакомы с маркером по умолчанию, который выглядит так:

На этом этапе вы будете использовать google.maps.Marker для размещения маркеров на карте.

Определите объект для местоположения маркеров.

Для начала создайте новую функцию addMarkers() и объявите объект locations , который имеет следующий набор точек широты/долготы для популярных туристических достопримечательностей Сиднея.

Также обратите внимание, что вам необходимо передать экземпляр Map в функцию. Он понадобится вам позже при создании экземпляров маркеров.

 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }

Создайте экземпляр google.maps.Marker для каждого маркера, который вы хотите отобразить.

Чтобы создать маркеры, используйте код ниже для итерации по объекту locations с помощью цикла for...in , создайте набор параметров для отображения каждого маркера, а затем создайте экземпляр google.maps.Marker для каждого местоположения.

Обратите внимание на свойство icon в markerOptions . Помните маркер по умолчанию, который мы видели ранее? Знаете ли вы, что можно настроить маркер на любое изображение? Конечно, можно!

Свойство icon позволяет указать путь к любому файлу изображения, который вы хотите использовать в качестве маркера. Если вы начали эту практическую работу, используя наш шаблон проекта, то изображение уже добавлено в /src/images .

Также обратите внимание, что вам необходимо сохранять экземпляры маркеров в массиве и возвращать их из функции, чтобы их можно было использовать позже.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
Отобразите маркеры.

API JavaScript Карт автоматически создает и отображает маркер каждый раз при создании нового экземпляра google.maps.Marker , поэтому теперь все, что вам нужно сделать, — это обновить обработчик обещаний API JS, чтобы он вызывал addMarkers() и передавал ему ваш экземпляр Map :
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

Теперь вы должны увидеть пользовательские маркеры на карте:

Напомним, что на этом этапе вы определили набор местоположений маркеров и создали экземпляр google.maps.Marker с пользовательским значком маркера для каждого местоположения.

Ваша функция addMarkers() должна выглядеть примерно так:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

На следующем этапе вы узнаете, как улучшить пользовательский опыт использования маркеров с помощью кластеризации маркеров.

8. Включить кластеризацию маркеров

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

Вот тут-то и пригодится кластеризация маркеров. Кластеризация маркеров — еще одна часто реализуемая функция, которая группирует близлежащие маркеры в один значок, который меняется в зависимости от уровня масштабирования, вот так:

Алгоритм кластеризации маркеров разбивает видимую область карты на сетку, а затем группирует значки, находящиеся в одной ячейке. К счастью, вам не нужно беспокоиться об этом, поскольку команда платформы Google Карт создала полезную библиотеку с открытым исходным кодом MarkerClustererPlus , которая делает всё автоматически. Вы можете ознакомиться с исходным кодом MarkerClustererPlus на GitHub .

Импортируйте MarkerCluster .

В шаблоне проекта для этой лабораторной работы библиотека утилит MarkerClustererPlus уже включена в зависимости, объявленные в файле package.json , поэтому вы уже установили ее, когда запустили npm install в начале этой лабораторной работы.

Чтобы импортировать библиотеку, добавьте следующее в начало файла app.js :
```
 import MarkerClusterer from '@google/markerclustererplus';
```
Создайте новый экземпляр MarkerClusterer .

Чтобы создать кластеры маркеров, вам необходимо сделать две вещи: предоставить значки, которые вы хотите использовать для своих кластеров маркеров, и создать новый экземпляр MarkerClusterer .

Сначала объявите объект, указывающий путь к значкам, которые вы хотите использовать. В проекте шаблона уже есть набор изображений, сохранённых в ./img/m . Обратите внимание, что имена файлов изображений пронумерованы последовательно и имеют одинаковый префикс: m1.png , m2.png , m3.png и так далее.

При установке свойства imagePath в параметрах кластеризатора маркеров вы просто указываете путь и префикс файла, а кластеризатор маркеров автоматически использует все файлы с этим префиксом и добавляет номер в конец.

Во-вторых, создайте новый экземпляр MarkerClusterer и передайте ему экземпляр Map , на котором вы хотите отобразить кластеры маркеров, и массив экземпляров Marker , которые вы хотите кластеризовать.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
Отобразите кластеры маркеров.

Вызовите функцию clusterMarkers() из обработчика обещаний JS API. Кластеры маркеров автоматически добавляются на карту при создании экземпляра MarkerClusterer при вызове функции.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

Теперь на вашей карте должно появиться несколько скоплений маркеров.

Обратите внимание, что при увеличении или уменьшении масштаба MarkerClustererPlus автоматически перенумеровывает и изменяет размер кластеров. Вы также можете нажать на значок любого кластера маркеров, чтобы увеличить масштаб и увидеть все маркеры, входящие в этот кластер.

Напомним, что на этом этапе вы импортировали библиотеку утилит MarkerClustererPlus с открытым исходным кодом и использовали ее для создания экземпляра MarkerClusterer , который автоматически кластеризовал маркеры, созданные вами на предыдущем этапе.

Ваша функция clusterMarkers() должна выглядеть примерно так:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

Далее вы узнаете, как обрабатывать взаимодействие с пользователем.

9. Добавьте взаимодействие с пользователем

Теперь у вас есть великолепная карта, отображающая некоторые из самых популярных туристических мест Сиднея. На этом этапе вы добавите дополнительную обработку взаимодействия с пользователем, используя систему событий JavaScript API Карт, чтобы ещё больше улучшить взаимодействие с вашей картой.

API JavaScript для Карт предоставляет комплексную систему событий, которая использует обработчики событий JavaScript, позволяя обрабатывать различные взаимодействия пользователя в коде. Например, вы можете создать прослушиватели событий, которые будут запускать выполнение кода при таких взаимодействиях, как нажатие пользователем на карту и маркеры, панорамирование карты, увеличение и уменьшение масштаба и т. д.

На этом этапе вы добавите прослушиватель щелчков к вашим маркерам, а затем программно заставите карту панорамироваться, чтобы поместить маркер, на который нажал пользователь, в центр карты.

Установите прослушиватель щелчков на маркерах.

Все объекты в Maps JavaScript API, которые поддерживают систему событий, реализуют стандартный набор функций для обработки взаимодействия с пользователем, например addListener , removeListener и другие.

Чтобы добавить прослушиватель событий щелчка к каждому маркеру, пройдитесь по массиву markers и вызовите addListener для экземпляра маркера, чтобы прикрепить прослушиватель для события click :
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
При щелчке по маркеру происходит панорамирование.

Событие click срабатывает каждый раз, когда пользователь щёлкает или касается маркера, и возвращает событие в виде JSON-объекта с информацией об элементе пользовательского интерфейса, на который был нажат. Чтобы улучшить взаимодействие с картой, вы можете обработать событие click и использовать его объект LatLng для получения широты и долготы нажатого маркера.

Получив это, просто передайте это встроенной функции panTo() экземпляра Map , чтобы карта плавно перемещалась к центру на выбранном маркере, добавив следующее в функцию обратного вызова обработчика событий:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```
Назначьте прослушиватели щелчков.

Вызовите addPanToMarker() из обработчика обещаний JS API и передайте ему карту и маркеры для выполнения кода и назначения прослушивателей щелчков.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });
```

Теперь откройте браузер и нажмите на маркеры. Вы увидите, как карта автоматически центрируется при нажатии на маркер.

Напомним, что на этом этапе вы использовали систему событий JavaScript API Карт, чтобы назначить прослушиватель щелчков всем маркерам на карте, извлекли широту и долготу маркера из сработавшего события щелчка и использовали их для центрирования карты при каждом щелчке по маркеру.

Ваша функция addPanToMarker() должна выглядеть примерно так:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Остался всего один шаг! Теперь вы сможете ещё больше улучшить пользовательский интерфейс карты, используя функции рисования Maps JavaScript API.

10. Нарисуйте на карте

На данный момент вы создали карту Сиднея с маркерами популярных туристических направлений и управлением взаимодействием с пользователем. На последнем этапе этой лабораторной работы вы будете использовать функции рисования Maps JavaScript API, чтобы добавить дополнительную полезную функцию к своей карте.

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

API JavaScript Карт включает набор функций для рисования фигур на карте, таких как квадраты, многоугольники, линии и круги. Далее вам нужно отобразить круг, отображающий область радиусом 800 метров (примерно полмили) вокруг маркера при щелчке по нему.

Нарисуйте круг с помощью google.maps.Circle .

Функции рисования в Maps JavaScript API предоставляют широкий выбор вариантов отображения отрисованного объекта на карте. Чтобы отобразить круговой радиус, объявите набор параметров для круга, таких как цвет, толщина обводки, центр круга и его радиус, а затем создайте новый экземпляр google.maps.Circle для создания нового круга:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
При щелчке по маркеру рисуется круг.

Чтобы нарисовать круг, когда пользователь нажимает на маркер, все, что вам нужно сделать, это вызвать функцию drawCircle() которую вы написали выше, из обратного вызова прослушивателя щелчков в addPanToMarker() и передать ей карту и местоположение маркера.

Обратите внимание, что также добавлен условный оператор, вызывающий circle.setMap(null) . Это удаляет ранее отрисованный круг с карты, если пользователь щёлкает по другому маркеру, так что карта не будет покрыта кругами по мере её изучения пользователем.

Ваша функция addPanToMarker() должна выглядеть примерно так:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

Готово! Откройте браузер и нажмите на один из маркеров. Вокруг него должен появиться круг:

11. Поздравления

Вы успешно создали свое первое веб-приложение с использованием платформы Google Карт, включая загрузку API Карт JavaScript, загрузку карты, работу с маркерами, управление и рисование на карте, а также добавление взаимодействия с пользователем.

Чтобы увидеть готовый код, проверьте готовый проект в каталоге /solutions .

Что дальше?

В этой лабораторной работе вы рассмотрели основы работы с Maps JavaScript API. Теперь попробуйте добавить на карту некоторые из следующих функций:

Измените тип карты для отображения спутниковых, гибридных и рельефных карт.
Включите локализацию , чтобы загрузить карту на разных языках.
Настройте другие взаимодействия с пользователем, такие как масштабирование и управление картой .
Добавьте информационные окна для отображения информации при нажатии на маркеры.
Ознакомьтесь с дополнительными библиотеками, доступными для API JavaScript Карт, которые обеспечивают дополнительные функции, такие как места, рисование и визуализация.

Чтобы продолжить изучение дополнительных способов работы с платформой Google Карт в Интернете, ознакомьтесь со следующими ссылками: