Pure JS map foreach with html data-attr

index.twig

<div class="map-holder" data-lat="{{ office.map.lat }}" data-lng="{{ office.map.lng }}" data-zoom="{{ office.map.zoom }}">

initMaps.js

  function initMaps() {
    let mapHolders = document.getElementsByClassName('map-holder');

    Array.prototype.filter.call(mapHolders, map => {
        let lat = Number(map.dataset.lat);
        let lng = Number(map.dataset.lng);
        let zoom = Number(map.dataset.zoom);

        // Display the map
        let instance = new google.maps.Map(map, {
            center: {
                lat: lat,
                lng: lng
            },
            zoom: zoom
        });
        
        // Display the marker
        var marker = new google.maps.Marker({
            position: {
                lat: lat,
                lng: lng
            },

            map: instance
        });
    });
  }