Need help setting a JavaScript variable to the value of a WordPress Custom Field

I'm trying to load a google map using javascript in a custom html block on a WordPress post. I'm trying to do it all inline within a custom html block for simplicity's sake, as I'm just beginning to learn javascript and php.

The below code runs perfectly well but I'd like to make it dynamic. Specifically I'd like to start by setting center: {lat: -34.397, lng: 150.644}, to a latitude and longitude specified within a wordpress custom field, created with the advanced custom fields plugin (ACF).

<div id="map" style="height: 500px; "></div>
<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY&callback=initMap" async defer></script>

I've already got the custom fields created named latitude and longitude, I've also made sure they are exposed in the WordPress REST API... although I'm not sure that matters.

Basically I'm looking for example code I can add to set a variable to the value of a WordPress custom field (ACF)

Update

I feel that I should've mentioned that I'm trying to get this block of code to run in a Elementor Custom HTML Block. This seems to block me from using any sort of php. Also when I try to use the functions defined in the ACF documentation I get errors that the functions undefined. Seems like some scripts somewhere are getting called in the wrong order...