Задание. Сверастать карту по макету, для реализации карты использовать GoogleMaps API

Frontend developer HTML / CSS
1

Задание.
Для реализации карты использовать GoogleMaps API. Скрыть элементы интерфейса карты и создать кастонный маркер и информационное окно с адресом, согласно макету.

API KEY: (ключ)

Весь ютуб облазил, ничего не нашёл. Подскажите кто знает. Что делать с этим ключом и как мне реализовать карту эту у себя на сайте? Без сторонних библиотек.

2 
<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Карта с кастонным маркером и информационным окном</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <style>
    #map {
      width: 100%;
      height: 400px;
    }

    .custom-marker {
      width: 30px;
      height: 30px;
      background-image: url("images/marker.png");
    }

    .infowindow {
      width: 200px;
      height: 100px;
      background-color: #ffffff;
      border: 1px solid #000000;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    // Инициализация карты
    const map = new google.maps.Map(document.getElementById("map"), {
      center: {
        lat: 55.752222,
        lng: 37.615556
      },
      zoom: 10
    });

    // Скрытие элементов интерфейса карты
    map.ui.mapTypeControl.disable();
    map.ui.zoomControl.disable();
    map.ui.scaleControl.disable();

    // Создание кастонного маркера
    const marker = new google.maps.Marker({
      position: {
        lat: 55.752222,
        lng: 37.615556
      },
      icon: {
        url: "images/marker.png"
      }
    });

    // Добавление маркера на карту
    map.addMarker(marker);

    // Создание информационного окна
    const infoWindow = new google.maps.InfoWindow({
      content: "Адрес: Москва, ул. Тверская, 1"
    });

    // Добавление обработчика события клика по маркеру
    marker.addListener("click", () => {
      infoWindow.open(map, marker);
    });
  </script>
</body>
</html>