Good morning everybody
I’m building an Elementor widget that shows a Google map and an elevation graph, reading data from a kml file.

I’m using Google Api, Geoxml3 and D3js.

All works fine in the frontend. The problem is refreshing the content on the backend once I change the kml file or the zoom.

As a first try, I added a button to call the init function on a specific event.

file: widget-map.php

$this->add_control(
        'update_kml',
        [
            'label' => esc_html__( 'Update the map', 'textdomain' ),
            'type' => ElementorControls_Manager::BUTTON,
            'separator' => 'before',
            'button_type' => 'success',
            'text' => esc_html__( 'Update content', 'textdomain' ),
            'event' => 'update_kml',
        ]
);

... some more code ...

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

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

file: render-map.js

function customAfterParse(doc) {
  const coords = doc[0].placemarks[0].LineString[0].coordinates;
  coords.forEach((element) => {
    const pointLat = element.lat;
    const pointLng = element.lng;

    geoPath.push({ lat: pointLat, lng: pointLng });
  });
}

function completeInit() {
  var startLatlng = geoPath[0];
  mapInstance.setCenter(startLatlng);

  parser.showDocument(parser.docs[1]);
}

function initData() {
  kmlFile = document.querySelector("#kgm-map-container").dataset.kml;
  mapZoom = +document.querySelector("#kgm-map-container").dataset.zoom;
  

  var latlng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    mapId: "myMapId",
    zoom: mapZoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DEFAULT,
    },
  };
  mapInstance = new google.maps.Map(document.getElementById("kgm-map"), mapOptions);

  // Create a new parser for all the KML
  parser = new geoXML3.parser({
    map: mapInstance,
    processStyles: true,
    singleInfoWindow: true,
    zoom: false,
    afterParse: customAfterParse,
  });

  // Add an event listen for the parsed event on the parser
  google.maps.event.addListener(parser, "parsed", completeInit);

  parser.parse(kmlFile);
}


// --- STARTING POINT
jQuery(document).ready(function () {
  // I add a timeout to be sure that all elements are ready
  setTimeout(() => {
    initData();

    if (window.elementor != undefined) {
      elementor.channels.editor.on("update_kml", function (controlView, model) {
        initData();
      });
    }
  }, 1000);
});

But, when I click, I receive this message:
XMLHttpRequest.overrideMimeType: Cannot call ‘overrideMimeType()’ on XMLHttpRequest after ‘send()’ (when its state is LOADING or DONE).

If I click it again a couple of times, my content is often updated correctly.

First of all, I need a way to disable autorefresh when my control values change, because the autorefresh creates only an empty output.

Then I need to understand the meaning of that message, because all the javascript functions are the same that I call in the frontend, with no errors.

Thank you for any suggestions. Feel free to ask for more info if needed