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

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

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

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

Что вы будете строить

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

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

Что вы узнаете

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

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

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

Необходимые продукты платформы Google Карт

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

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

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

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

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

Начало работы с платформой Google Карт

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

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

3. Настройте

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

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

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

Включите API и SDK платформы Google Maps, необходимые для этой лаборатории кода, в Google Cloud Marketplace . Для этого выполните действия, описанные в этом видео или в этой документации .
Создайте ключ API на странице учетных данных Cloud Console. Вы можете выполнить действия, описанные в этом видео или в этой документации . Для всех запросов к платформе Google Maps требуется ключ 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 Maps!

Основой использования платформы Google Maps для Интернета является Maps JavaScript API. Этот API предоставляет интерфейс JavaScript для использования всех функций платформы Google Maps, включая карту, маркеры, инструменты рисования и другие службы платформы Google Maps, такие как 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, выполните следующие действия:

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

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

Для класса Loader требуется объект JSON, который определяет различные параметры загрузки API JavaScript Карт, включая ваш ключ API платформы Google Карт, версию API, которую вы хотите загрузить, и любые дополнительные библиотеки, предоставляемые API JS Карт, которые вы хотите загрузить. . Для целей этой лаборатории кода вам нужно только указать ключ 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 в консоли браузера:

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

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

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

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

    const loader = new Loader(apiOptions);

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

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

5. Показать карту

Время показать свою первую карту!

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

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

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

Прежде чем вы сможете отобразить карту, вам нужно указать Maps JavaScript API, где вы хотите, чтобы она отображалась на странице. Если вы
```
 <div id="map"></div>
```
просмотрите index.html , document.getElementById увидите, что там уже есть элемент div , который выглядит следующим образом: Ссылка 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() из обработчика обещаний API JS, чтобы он вызывался после загрузки API JavaScript Карт:
```
 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. Добавьте маркеры на карту

Есть много вещей, которые разработчики делают с Maps 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;
```
Отобразите маркеры.

Maps JavaScript API автоматически создает и отображает маркер всякий раз, когда создается новый экземпляр google.maps.Marker , поэтому теперь все, что вам нужно сделать, это обновить обработчик промисов JS API, чтобы он вызывал 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 Maps Platform создала полезную служебную библиотеку с открытым исходным кодом под названием 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. Добавьте взаимодействие с пользователем

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

Maps JavaScript API предоставляет комплексную систему событий, которая использует обработчики событий 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);
 });
```

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

Напомним, что на этом шаге вы использовали систему событий Maps 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, чтобы добавить дополнительную полезную функцию к вашей карте.

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

Maps JavaScript API включает набор функций для рисования фигур на карте, таких как квадраты, многоугольники, линии и круги. Затем вы визуализируете круг, чтобы показать радиус 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 Maps, включая загрузку Maps JavaScript API, загрузку карты, работу с маркерами, управление и рисование на карте, а также добавление взаимодействия с пользователем.

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

Что дальше?

В этой лабораторной работе вы рассмотрели основы того, что можно делать с помощью Maps JavaScript API. Затем попробуйте добавить на карту некоторые из этих объектов:

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

Чтобы узнать больше о том, как работать с платформой Google Карт в Интернете, перейдите по этим ссылкам: