Apple Maps MapKit JS showing blank grid – Blancer.com Tutorials and projects

When I copy the code from the MapKit JS website, it displays a blank grid with no map. Here’s the code I copied from the Embed heading.

<!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        
        <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
        
        <style>
        #map {
            width: 100%;
            height: 600px;
        }
        </style>
        
        </head>
        
        <body>
        <div id="map"></div>
        
        <script>
        mapkit.init({
            authorizationCallback: function(done) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "/services/jwt");
                xhr.addEventListener("load", function() {
                    done(this.responseText);
                });
                xhr.send();
            }
        });
        
        var Cupertino = new mapkit.CoordinateRegion(
            new mapkit.Coordinate(37.3316850890998, -122.030067374026),
            new mapkit.CoordinateSpan(0.167647972, 0.354985255)
        );
        var map = new mapkit.Map("map");
        map.region = Cupertino;
        </script>
        </body>
        </html>

I tried searching for solutions, but I’m still a beginner so it was quite confusing.