Интерактивная карта через API

[sne-syn]

Тотальный новичок.
Закралась ошибка в переменной element. Не понимаю, что ей не нравится. Когда задаю через Id, работает на ура!. Но мне принципиально сделать через класс.
Заранее спасибо.

<section>
        <h2 class="visually-hidden">Карта</h2>
        <div class="background-map"></div>
      </section>

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

function initMap() {
          var element = document.getElementsByClassName("background-map");
          var options = {
            zoom: 10,
            center: {
              lat: 34.857323,
              lng: -111.794933
            }
          };

          var myMap = new google.maps.Map(element, options);

          var marker = new google.maps.Marker({
            position: {
              lat: 34.857323,
              lng: -111.794933
            },
            map: myMap
          });

        }

.background-map {
  width: 100%;
  height: 595px;
}

[j0hnik]

var element = document.getElementsByClassName("background-map")[0];

[sne-syn]

Спасибо, добрый человек! А не подскажeте, откуда этот [0]?

[j0hnik]

document.getElementsByClassName;
возвращает коллекцию. чтобы обратится к конкретному элементу,мы используем такую вот нотацию [номер элемента]. где отсчет начинается с нуля.
для того чтобы посмотреть что получает переменная можно использовать такой код

console.log(element)