Создайте карту с Google Maps API и JavaScript

Подготовка к работе

Для работы потребуется текстовый редактор (доступен для Windows и macOS), браузер Google Chrome и созданная папка «www» с файлом index.html со стандартной разметкой.

Создание проекта и получение API ключа

Создайте новый проект на Google Maps Platform (требуется авторизация). В разделе «API и сервисы» включите JavaScript API для Google Maps и выберите нужную версию (Maps JavaScript API). Получите API-ключ в меню «Учетные данные», выбрав «Создать учетные данные» -> «API-ключ». Ключ необходим для работы с картами и их встраивания на сайты.

Подключение API ключа и создание карты

В index.html, перед закрывающим тегом <body>, добавьте скрипт API с асинхронной загрузкой, указав свой API-ключ:

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

Замените YOUR_API_KEY на свой API-ключ. Функция initMap будет вызвана после загрузки скрипта. Создайте её в отдельном <script> теге:

<script>
function initMap() {
  // ... код для создания карты ...
}
</script>

Также добавьте <div> элемент для карты:

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

И примените стили:

#map {
  height: 400px;
  width: 500px;
}

Создание карты и добавление маркера

В функции initMap создайте карту с помощью Google Maps API, указав контейнер (div с id «map»), координаты центра (Лондон) и масштаб:

function initMap() {
  const london = { lat: 51.5074, lng: 0.1278 };
  const mapOptions = {
    center: london,
    zoom: 4
  };
  const map = new google.maps.Map(document.getElementById("map"), mapOptions);

  const marker = new google.maps.Marker({
    position: london,
    map: map,
    title: 'Наведи на меня',
    icon: 'https://developers.google.com/maps/documentation/javascript/examples/marker-icon/beachflag.png'
  });

  const infoWindow = new google.maps.InfoWindow({
    content: '<h3>Это место</h3><p>Простое описание места</p>'
  });

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

Этот код создаёт карту, добавляет маркер с изображением и информационное окно, открывающееся по клику на маркер.

Решение проблем с оплатой

Google Maps API платный. Для неограниченного использования создайте платежный аккаунт на Google Cloud Platform. Это не обязательно потребует немедленных платежей, но позволит использовать API без ограничений.

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

Для стилизации карты используйте параметр styles в mapOptions (примеры стилей см. в документации Google Maps API).

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

Что будем искать? Например,программа