How can I get my map legend to populate with an outside dataset?

I am trying to display a map legend with sized circles using an outside dataset file, but the legend is not displaying the actual information needed.

It seems to work if I make an array of data within the JS code, but I need it to work with the .js file that I’m pulling from.

The JavaScript I’m utilizing is below:

var map;  function initMap() { map = new google.maps.Map(document.getElementById('map'), {     zoom: 10,     center: {         lat: 27.964157,         lng: -82.452606     },     mapTypeControl: false,     streetViewControl: false,     //    mapTypeId: 'terrain',     //     disableDefaultUI: true,     //      gestureHandling: 'none',     //          zoomControl: false,   });    var script = document.createElement('script');  script.src = 'https://trialscout.com/Scripts/landscapedata/tampadata_geojsonp.js'; document.getElementsByTagName('head')[0].appendChild(script);  map.data.setStyle(function (feature) {     var nctcount = feature.getProperty('count_of_nct_id');             return {         icon: getCircle(nctcount)     }; });   var icons = [];  var legend = document.getElementById('legend'); for (var key in icons) { var type = icons[key]; var name = type.name; var icon = type.icon; var scale = type.scale; var opacity = type.fillOpacity; var div = document.createElement('div'); div.innerHTML = "<img src='data:image/svg+xml;utf8,<svg viewBox=\"0 0 100 100\" height=\"" + 8 * scale / 8 + "\" width=\"" + 8 * scale / 8 + "\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill: green; stroke: white; stroke-width: 1;\" opacity=\"" + opacity + "\"/></svg>'> " + name; legend.appendChild(div); }    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);  }   function getCircle(nctcount) { var nctamt = nctcount; if (nctamt <= 10) {     return {         path: google.maps.SymbolPath.CIRCLE,         fillOpacity: 1,         fillColor: 'green',         scale: 5,         strokeColor: 'white',         strokeWeight: .5,         name: "<= 10"     }; }  else if (nctamt <= 100) {     return {         path: google.maps.SymbolPath.CIRCLE,         fillOpacity: .8,         fillColor: 'green',         scale: 10,         strokeColor: 'white',         strokeWeight: .5,         name: "<= 100"     }; }  else if (nctamt <= 250) {     return {         path: google.maps.SymbolPath.CIRCLE,         fillOpacity: .6,         fillColor: 'green',         scale: 15,         strokeColor: 'white',         strokeWeight: .5,         name: "<= 250"     }; }  else if (nctamt <= 500) {     return {         path: google.maps.SymbolPath.CIRCLE,         fillOpacity: .4,         fillColor: 'green ',         scale: 20,         strokeColor: 'white',         strokeWeight: .5,         name: "<= 500"     }; }  else if (nctamt <= 2000) {     return {         path: google.maps.SymbolPath.CIRCLE,         fillOpacity: .2,         fillColor: 'green',         scale: 25,         strokeColor: 'white',         strokeWeight: .5,         name: "<= 2000"     }; }  else {     return {         path: google.maps.SymbolPath.CIRCLE,         fillOpacity: .2,         fillColor: 'green',         scale: 35,         strokeColor: 'white',         strokeWeight: .5,         name: "> 2000"     }; }  }  function tslandscape_callback(response) { map.data.addGeoJson(response); } 

My Fiddle for the project is here: https://jsfiddle.net/Strawmr/uoc8vwhf/7/