Google Maps Custom Style не применяется в WordPress (Elementor) ⇐ Javascript

[Anonymous]

Я работаю на веб-сайте WordPress с использованием Builder Elementor Pro Page Builder, и я пытаюсь интегрировать карту Google на заказ на странице «Contact Us». JavaScript api
[*] Настройка billing
[*] сгенерировал достоверный api -ключ

Steps:

• i использовал элемент letreor hapsere. id = "map" .
• Я добавил следующий скрипт с помощью интеграции Ementor> Custom Code Consect:

Код: Выделить всё

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);
}





I removed my API key

Проблема:
Карта нагрузка , но пользовательский стиль не применяется . Он показывает карту Google по умолчанию вместо версии GreyScale, которую я пытаюсь достичь.
чего я ожидаю:

[*] полностью стилизованная карта в scale
unnecessary Points и Labless and Labels and Labels and Labels and Labels and Labels and Labels и Labelse и Labels -Tearles и Labels и Labels и Labels и положительные знания и положительные задачи
нельзя. /> < /ul>
поведение консоли: < /h3>
Нет ошибок JavaScript, за исключением случаев: < /p>
Uncaught (in promise) InvalidValueError: initMap is not a function
< /code>

Мой вопрос: < /h3>
Что я делаю не так? Сайт WordPress был бы очень признателен.
Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/797 ... -elementor