在 Wordpress 上使用 Elementor 自定义 Html 小部件时，脚本标签中的代码未运行

Question

Im currently developing a website using Wordpress and Elementor and wanted to use the Google Maps API to display the locations of the other team members involved. I followed the tutorial on https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map , placed the code in a custom HTML widget and everything works as expected on pc. However, when I try viewing the map on mobile it does not work and instead outputs the code I wrote within the script tags (doesn't work on ios [safari and chrome] as well as android).

The code:

<div id="map" style="height:400px;width:100%;">

<script>

function initMyNewMap() {
console.log("sdasdasd");  
var m1= {lat: -29.3151, lng: 27.4869};
var m2= {lat: -37.840935, lng: 144.946457};
var m3= {lat: 3.140853, lng: 101.693207};
var m4= {lat: 41.1177, lng: -73.4078968};
var m5= {lat: 1.3521, lng: 103.8198};
var m6= {lat: 30.0444, lng: 31.2357};
var m7= {lat: 13.0827, lng: 80.2707};
var m8= {lat: 35.2010, lng: -91.8318};
var m9= {lat: 38.9517, lng: -92.3341};
var m10= {lat: 47.9030, lng: 1.9093};
var m11= {lat: 25.0330, lng: 121.5654};
var m12= {lat: -3.7327, lng: -38.5270};
var m13= {lat: 19.4326, lng: -99.1332};
var m14= {lat: -23.5505, lng: -46.6333};
var m15= {lat: 39.0458, lng: -76.6413};
var m16= {lat: 42.4072, lng: -71.3824};
var m17= {lat: 43.2630, lng: -2.9350};
var m18= {lat: 25.6866, lng: -100.3161};
var m19= {lat: -19.9167, lng: -43.9345};
var m20= {lat: 12.9716, lng: 77.5946};
var m21= {lat: 31.9686, lng: -99.9018};
var m22= {lat: 13.7563, lng: 100.5018};
var m23= {lat: 40.6331, lng: -89.3985};
var m24= {lat: 40.0583, lng: -74.4057};
var m25= {lat: 27.6648, lng: -81.5158};
var m26= {lat: 33.7490, lng: -84.3880};


  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: m1});
  var marker = new google.maps.Marker({position: m26, map: map});
  var marker2 = new google.maps.Marker({position: m25, map: map});
}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMyNewMap">
    </script>
</div>

The mobile output (on my phone)

And here is the site url: https://www.glomun.org/home-temp/

Any help will be appreciated!

Answer 1

Found a workaround where I had some code that created the script tags and forced the code in it, though this problem was never addressed and I still don't know why it happened.