Good evening everybody
I’m writing an addon for Elementor to display a map and a graph, based on a kml file.
The addon works on the frontend, so I believe that the JS is pretty ok.

The JS code has some problem in the backend. I believe that something happens too late.

The render function of my addon is very simple:

protected function render() {
    $settings = $this->get_settings_for_display();
    $kmlUrl = $settings['kml_url'] ? $settings['kml_url'] : null;

    echo "<div id='kgm-map-container' data-kml='{$kmlUrl["url"]}' >";
        echo '<div id="kgm-map">loading map...</div>';
        echo '<div id="kgm-elevation_chart">loading chart...</div>';
    echo '</div>';
}

$kml_url is taken from a addon control, as you can see, then added as a meta attribute to my output.

The part of the JS that uses this information is this one:

jQuery(document).ready(function () {
  kmlFile = jQuery("#kgm-map-container").data("kml");

  console.log(document.getElementById("kgm-map-container"));
  
  var latlng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DEFAULT,
    },
  };
  mapInstance = new google.maps.Map(document.getElementById("kgm-map"), mapOptions);
  ... and so on

Pay attention now: the line “console.log(document.getElementById(“kgm-map-container”));” returns null, that’s why the map is not shown in the backend.

I see that jQuery(document).ready(..) is not the correct place to read my data, because they’re not available yet.

So, how can I patch this code? Is there a good Elementor hook that runs at the right time?
I tried with “elementor/frontend/init” but it’s clearly not working in the backend.
I tried with “elementor/frontend/init”, but it breaks both frontend and backend.

I need your help!
Thanks