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