How to call the javascript code in qualtrics survey

I have a code which actually calls all the possible routes with their travel time for the origin and destination zip code. Now, I want to pop it in the qualtrics survey. How can I do that? Basically, in the survey, I want to ask the participant about their origin and destination zip code and based on that I will give them 3 possible rooute choice. Then, I will ask them what route they will usually prefer. After that, I will add some facility to the other non-choosen routes and examine whether their choice change or not. So, I want a code which actually pop out the routes based on the zip codes. I already wrote the code , now I want it to call it in the survey.

The code is as follows:

<body>
<div id="floating-panel" style="border:1px; width:600px">
 <div style="width:300px; float:left">
 <strong>Home:</strong>
  <select id="Home">
    <option value="32826, FL">32826</option>
    <option value="32817, FL">32817</option>
    <option value="joplin, mo">Joplin, MO</option>
    <option value="oklahoma city, ok">Oklahoma City</option>
    <option value="amarillo, tx">Amarillo</option>
    <option value="gallup, nm">Gallup, NM</option>
    <option value="flagstaff, az">Flagstaff, AZ</option>
    <option value="winona, az">Winona</option>
    <option value="kingman, az">Kingman</option>
    <option value="barstow, ca">Barstow</option>
    <option value="san bernardino, ca">San Bernardino</option>
    <option value="los angeles, ca">Los Angeles</option>
  </select>
  <br>
  <strong>Work:</strong>
  <select id="Work">
    <option value="32826, FL">32826</option>
    <option value="32817, FL">32817</option>
    <option value="joplin, mo">Joplin, MO</option>
    <option value="oklahoma city, ok">Oklahoma City</option>
    <option value="amarillo, tx">Amarillo</option>
    <option value="gallup, nm">Gallup, NM</option>
    <option value="flagstaff, az">Flagstaff, AZ</option>
    <option value="winona, az">Winona</option>
    <option value="kingman, az">Kingman</option>
    <option value="barstow, ca">Barstow</option>
    <option value="san bernardino, ca">San Bernardino</option>
    <option value="los angeles, ca">Los Angeles</option>
  </select>
  <br>
  <strong>Routes:</strong>
  <select id="Routes" onchange="selectRoute(value);">
  <option value="NA">No routes available</option>
  </select>
 </div>
 <div style="width:300px; float:left">
<textarea id="route_info" style="width:300px; height:100px; float:left; font-size:10px; padding:10px; resize: none" readonly></textarea>
 </div> 
</div>
<div id="map"></div>
<script>
var directionsDisplayObjects = [];
var routeInfo = [];
var map;
var colors = ["red", "green", "blue", "yellow", "black"]

function initMap() 
{
    var directionsService = new google.maps.DirectionsService;
    map = new google.maps.Map(document.getElementById('map'), 
    {
        zoom: 7,
        center: {lat: 41.85, lng: -87.65}
    });

    var directionsRequest = 
    {
        origin: document.getElementById('Home').value,
        destination: document.getElementById('Work').value,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC
    };

    var onChangeHandler = function() 
    {
        calculateAndDisplayRoute(directionsService, directionsRequest);
    };
    document.getElementById('Home').addEventListener('change', onChangeHandler);
    document.getElementById('Work').addEventListener('change', onChangeHandler);
}

function resetColors() 
{
    for(value in directionsDisplayObjects)
    {
        directionsDisplayObjects[value].setOptions(
        {
            polylineOptions:
            {
                 strokeColor: colors[value]
                }
        });

        directionsDisplayObjects[value].setMap(map);
    }
}

function selectRoute(value) 
{
    resetColors();

    if(value == "NA")
    {
        document.getElementById("route_info").innerHTML = routeInfo.join("\n");
        return;
    }

    var polyline = new google.maps.Polyline(
    {
         strokeColor: "#555555",
         strokeOpacity: 0.7,
         strokeWeight: 8
    });

    directionsDisplayObjects[value].setOptions(
    {
        polylineOptions:polyline
    });

    directionsDisplayObjects[value].setMap(map);

    document.getElementById("route_info").innerHTML = routeInfo[value];

}

function calculateAndDisplayRoute(directionsService, directionsRequest) 
{
    map = new google.maps.Map(document.getElementById('map'), 
    {
        zoom: 7,
        center: {lat: 41.85, lng: -87.65}
    });

    directionsService.route(
    {
        origin: document.getElementById('Home').value,
        destination: document.getElementById('Work').value,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        provideRouteAlternatives: true 
    },
    function(response, status) 
    {
        if (status === 'OK') 
        {

            var len = response.routes.length;
            var routes = document.getElementById("Routes");
            var routeOptions = routes.options;

            if(len > 0)
            {
                for(i in routeOptions) 
                {
                    if(routeOptions[i].value == "NA") 
                    {
                        routes.remove(routeOptions[i]);
                    }
                }

                var option = document.createElement("option");
                option.text = "All routes (" + len + ")";
                option.value = "NA";
                option.selected = true;
                routes.add(option);

                directionsDisplayObjects = [];
                routeInfo = [];

                for (var i = 0; i < len; i++) 
                {

                    var directionsDisplay = new google.maps.DirectionsRenderer(
                    {
                            polylineOptions: {
                                strokeColor: colors[i]
                            }
                    });

                    directionsDisplay.setDirections(response);
                    directionsDisplay.setRouteIndex(i);
                    directionsDisplay.setMap(map);

                    var option = document.createElement("option");
                    option.text = "Route " + i;
                    option.value = i;
                    routes.add(option);

                    directionsDisplayObjects.push(directionsDisplay);

                    duration = response.routes[i].legs[0].duration.text;
                    distance = response.routes[i].legs[0].distance.text;

                    route_message = "--------------------------------\nRoute: " + colors[i] + "\n-------------\nDistance: " + distance + 
                        "\nDuration: " + duration + "\n-------------------------------"

                    routeInfo.push(route_message);
                }
            }
            else 
            {
                var option = document.createElement("option");
                option.text = "No routes available";
                option.value = "NA";
                routes.add(option);
            }

            document.getElementById("route_info").innerHTML = routeInfo.join("\n");

        } 
        else 
        {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

Now, I want to upload it in the qualtrics survey. Please help me about it