Google Distance Matrix API says: jQuery.Deferred exception: google is not defined | ReferenceError: google is not defined

I am using Google Distance Matrix API for my web application. When I tried loading the map, it shows me an error in the console log. I am new to the API and would appreciate any help. Many thanks! :)

Here is a screenshot of the errors in the console log

Below is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carpark Demo Code</title>
<!--<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">-->
<style>
    
</style>
    
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/json" src="https://maps.googleapis.com/maps/api/distancematrix/json?&key=AIzaSyAvlb7x4ZCfxvpxV90ha3g_YbaYfHPvfvk"></script>
    
    
<script>
    
    $(function(){ // ready function
      
        displayLiveData();
        googleDistanceCalc();
        
    });
    
    
    function displayLiveData(){ // 1st Function - carpark details, address
        
        $.ajax({

            type: "GET",
            url: 'https://maps.googleapis.com/maps/api/distancematrix/json?&key=AIzaSyAvlb7x4ZCfxvpxV90ha3g_YbaYfHPvfvk',
            dataType: 'json'

        })

      .done(function(json) { /* same as ready function, when data finishes loading and do something after */
            
            console.log("Successfully Loaded!");
        })

        .fail(function() {
            console.log("Loading Error.");
        });
    }
    
</script>
</body>
</html>

Thanks for the help!