JSF/JS Google Map не загружается в Chrome

У меня есть приложение на Java + JSF. С помощью Maps JavaScript API реализована загрузка карт и нанесение на карту маркеров.

Код:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/Templates/Admin/Main.xhtml">
    <ui:param name="bean" value="#{eventLocationBean}"></ui:param>
    <ui:define name="body">
        <div class="p-grid">
            <div class="p-col-12">
                <div class="ui-fluid">
                    <div class="detail_view card card-w-title">
                        <div id="map" style="min-height: 600px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            //<![CDATA[
            function initMap() {
                var locations = #{eventLocationBean.eventLocations};
                 
                var bounds = new google.maps.LatLngBounds();

                var map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 39.803, lng: -94.514},
                    scrollwheel: true,
                    zoom: 4,
                    minZoom: 2
                });

                var infowindow = new google.maps.InfoWindow();

                var marker, i, position;


                for (i = 0; locations.length > i; i++) {
                    position = new google.maps.LatLng(Number(locations[i].latitude), Number(locations[i].longitude))

                    marker = new google.maps.Marker({
                        position: position,
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(
                                    '<div class="info" style="text-align:center;">' +
                                    '   <h3>' +
                                    locations[i].userName +
                                    '   </h3>' +
                                    '   <div>' +
                                    '       <p>' +
                                    locations[i].activeCode + '  (' + locations[i].role + ')' +
                                    '       </p>' +
                                    '   </div>' +
                                    '</div>');
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

                    bounds.extend(position)
                }
                if (locations.length) {
                    map.fitBounds(bounds);
                }

                var northBoundary = 85;
                var southBoundary = -85;

                map.addListener('center_changed', function () {
                    var bounds = map.getBounds();
                    var ne = bounds.getNorthEast();
                    var sw = bounds.getSouthWest();
                    var center = map.getCenter();

                    if (ne.lat() > northBoundary) {
                        map.setCenter({lat: center.lat() - (ne.lat() - northBoundary), lng: center.lng()})
                    }

                    if (sw.lat() < southBoundary) {
                        map.setCenter({lat: center.lat() - (sw.lat() - southBoundary), lng: center.lng()})
                    }
                });

            }
            //]]>
        </script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=${eventLocationBean.apiKEY}&amp;callback=initMap"></script>
    </ui:define>
</ui:composition>

И когда в Google Chrome загружается карта, то в консоль браузера падают следующие ошибки:

Uncaught (in promise) Error: Could not load "util".
Uncaught (in promise) Error: Could not load "map".
Uncaught (in promise) Error: Could not load "marker".

И просто белая область. В Mozila FF такой проблемы нет. Карты загружаются.

Так же такой проблемы нет в похожем проекте но с использованием JSP. Код используется аналогичный и карты в Chrome,FF, Edge загружаются без проблем.

У меня есть предположение, что в JSF callback начинает отрабатывать раньше, чем ресурсы гугл успевают загрузится. Потому что если поставить брейкпоинт на строчке

var locations = #{eventLocationBean.eventLocations};

и подождать 3-5 секунд, отпустить, то карта с маркерами загрузится.

Как можно решить эту проблему? В идеале без использования timeout.

Api Key - валидный.