What causes map to not display after adding authentication to Laravel 5.5 [closed]

The project was working fine before I added authentication. After first login the map displayed correctly, and then when I reloaded the page, the map div was all grey. I then went and cleared browsing data and the map show once and disappeared after reload. If I do not clear browsing data the maps do not show at all. Below is the code for one of my pages:

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

<div id="addModal" class="modal fade" aria-hidden="true" aria-label="addModalLabel">
    <div class="modalAdd">
        <div class="modal-card">
            <div class="modal-card-head">
                <div class="modal-card-title">
                    <h3>Add Marker</h3>
                </div>
            </div>
            <div class="modal-card-body">
                <form action="" method="POST">
                    
                    <div class="form-group">
                        <label for="latitude">Latitude:</label>
                        <input type="text" class="form-control" id="latitude" name="latitude" value="">
                     </div>
                     <div class="form-group">
                         <label for="longitude">Longitude:</label>
                         <input type="text" class="form-control" id="longitude" name="longitude" value="">
                     </div>
                            
                     <div class="form-group">
                         <button type="submit" class="btn btn-primary">Add</button> &nbsp;
                         <button type="cancel" class="btn btn-danger">Cancel</button>
                      </div>
                  </form>
              </div>
          </div>
      </div>
  </div>

<script>
    function initMap(){
        var myLatlng = {lat:-17.999514, lng:31.061744};
        
        var options = {
            zoom: 8,
            center: myLatlng
        }

        var map = new google.maps.Map(document.getElementById('map'), options);

        var location = '';
        var lat = '';
        var lng = '';
        map.addListener("click", (mapsMouseEvent) => {
            $('#addModal').modal('show');
            location = JSON.stringify(mapsMouseEvent.latLng.toJSON());
            lat = JSON.stringify(mapsMouseEvent.latLng.lat());
            lng = JSON.stringify(mapsMouseEvent.latLng.lng());
            var latInput = document.getElementById('latitude');
            var lngInput = document.getElementById('longitude'); 
            locationInput.value = location;
            latInput.value = lat;
            lngInput.value =lng;
        });
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=places&v=weekly" async></script>

via Chebli Mohamed