Google Maps API code not rendering map on page

[AEM542]

I have an events website whereby the events are created using a web app in the admin section of the site. Part of the app allows the user to input an address which is then used to create a google map for the location of the event. I inserted the following code onto the page:

<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY-IS-HERE-ON-THE-PAGE&callback=initMap"
async defer></script>

The proper API key is in the above code on the page - not the placeholder as above.

I obtained some code that uses the tags in the web application as part of the javascript code, so that the values for the address that are typed in for the event are used to create the map (eg. {tag_address1}, {tag_address2} etc. The code below shows what I used. The problem is that the code also includes functions etc. for directions but I don’t need them.

When I test the code in the browser, it seems to be leaving a space where the map should go but it’s not rendering any map tiles.

I wondered if anyone could help me troubleshoot? Since I’m not using the directions part of the code, could I get some help deleting the un-needed sections as I thought that may be contributing to the problem of the map not showing. The code is quite old, I think from 2011 so I’m not sure if it’s compatible with the v3 API.

Thanks in advance.

<script type="text/javascript">

    var map; //global map
    var dRender; //global direction render
    
    var _ADDRESS = "{tag_address1} {tag_address2} {tag_addresscity}, {tag_addressstate} {tag_addresszipcode}";
    var _NAME = "{tag_name}";

    //geocode the address of web app item and create map
    $(function () {

      $("#js-map-to").val(_ADDRESS);

      var geo = new google.maps.Geocoder();
      var geoOpts = { address: _ADDRESS };
      geo.geocode(geoOpts, function (results, status) { createMap(results, status); });

      //setup input button to launch directions
      $("#js-map-submit").click(function (e) {
        e.preventDefault();
        getDirections();
      });

    });

    //callback from web app item address geocoding.
    //creates the map
    function createMap(results, status) {

      if (status === google.maps.GeocoderStatus.OK) {

        var myOptions = {
          zoom: 14,
          center: results[0].geometry.location,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false
        };
        map = new google.maps.Map(document.getElementById("js-map"), myOptions);

        dRender = new google.maps.DirectionsRenderer();
        dRender.setMap(map);

        var markerOpts = {
          position: myOptions.center,
          map: map,
          title: _NAME,
          animation: google.maps.Animation.DROP
        };
        var marker = new google.maps.Marker(markerOpts);

      }
      else {
        $("#js-map").text("Unable to render map, please check the address of this location.");
      }

    }

    //directions "Go" button event handler. 
    function getDirections() {

      var from = $("#js-map-from").val();
      if (from != "") {
        var to = _ADDRESS;
        var dService = new google.maps.DirectionsService();

        var dOpts = {
          destination: to,
          origin: from,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        dService.route(dOpts, function (result, status) { renderDirections(result, status); });
      }

    }

    //callback for direction routing async call
    function renderDirections(result, status) {

      if (status === google.maps.DirectionsStatus.OK) {
        var dDiv = $("#js-directions");
        dRender.setDirections(result);
        dRender.setPanel(dDiv[0]);

        var diagOpts = {
          width: 500,
          height: 500,
          title: "Directions To: " + result.routes[0].legs[0].end_address
        };
        dDiv.dialog(diagOpts);
      }
      else {
        alert("Unable to map directions");
      }

    }

  </script>