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

Question

我目前正在使用 Wordpress 和 Elementor 开发一个网站，并希望使用 Google 地图 API 来显示其他相关团队成员的位置。 我按照https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map上的教程，将代码放在自定义 HTML 小部件中，一切都在电脑上按预期工作。 但是，当我尝试在移动设备上查看 map 时，它不起作用，而是输出我在脚本标签中编写的代码（不适用于 ios [safari 和 chrome] 以及 android）。

编码：

<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>

移动 output（在我的手机上）

这里是网站 url： https://www.glomun.org/home-temp/

任何帮助将不胜感激！

Answer 1

找到了一种解决方法，我有一些代码创建了脚本标签并强制其中的代码，尽管这个问题从未得到解决，我仍然不知道它为什么会发生。