WordPress（Elementor）中Google Maps自定义样式无法生效的问题求助

大家好，我目前正在用WordPress搭建网站，搭配Elementor Pro页面编辑器，想在「联系我们」页面集成一个带自定义样式的谷歌地图，但折腾了一阵后发现自定义样式完全没生效，想请各位帮忙排查下问题。

前期已完成的准备工作 #

• 在Google Cloud Console创建了对应项目
• 启用了Maps JavaScript API
• 完成了账单信息配置
• 生成了有效的API密钥

具体集成步骤 #

1. 我先在Elementor里添加了官方的「Google Maps」组件，同时给地图容器设置了ID为map
2. 接着通过Elementor的「集成 > 自定义代码」功能，添加了以下两段脚本（已把我的真实API密钥替换为MYAPIKEY）：

<script>
function initMap() {
  const mapStyle = [{
    "elementType": "geometry",
    "stylers": [{ "color": "#f5f5f5" }]
  }, {
    "elementType": "labels.icon",
    "stylers": [{ "visibility": "off" }]
  }, {
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#616161" }]
  }, {
    "elementType": "labels.text.stroke",
    "stylers": [{ "color": "#f5f5f5" }]
  }, {
    "featureType": "administrative.land_parcel",
    "elementType": "labels",
    "stylers": [{ "visibility": "off" }]
  }, {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#bdbdbd" }]
  }, {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [{ "color": "#eeeeee" }]
  }, {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [{ "visibility": "off" }]
  }, {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#757575" }]
  }, {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [{ "color": "#e5e5e5" }]
  }, {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#9e9e9e" }]
  }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{ "color": "#ffffff" }]
  }, {
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [{ "visibility": "off" }]
  }, {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#757575" }]
  }, {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [{ "color": "#dadada" }]
  }, {
    "featureType": "road.highway",
    "elementType": "labels",
    "stylers": [{ "visibility": "off" }]
  }, {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#616161" }]
  }, {
    "featureType": "road.local",
    "stylers": [{ "visibility": "off" }]
  }, {
    "featureType": "road.local",
    "elementType": "labels",
    "stylers": [{ "visibility": "off" }]
  }, {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#9e9e9e" }]
  }, {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [{ "color": "#e5e5e5" }]
  }, {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [{ "color": "#eeeeee" }]
  }, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [{ "color": "#c9c9c9" }]
  }, {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#9e9e9e" }]
  }];

  const styledMapType = new google.maps.StyledMapType(mapStyle, { name: 'Styled Map' });
  const map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 26.117184862578004, lng: 50.59311162700443 },
    zoom: 13,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'styled_map']
    }
  });

  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');
  console.log(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>

遇到的具体问题 #

地图能正常加载显示，控制台也能打印出map对象，但我定义的所有自定义样式完全没有生效，地图还是默认的外观。我检查过API密钥是有效的，Maps JavaScript API也确实启用了，实在找不到哪里出了问题，有没有朋友能给点思路或者帮忙排查下？

内容来源于stack exchange