Вопрос или проблема
У меня есть страница здесь:
URL: https://hscr.com/short-term-rentals-vancouver-2/
Пароль: vancouvertest
На ней есть инициализация карты Google, если прокрутить вниз, вы увидите, что справа от списка элементов есть пустая область.
По какой-то странной причине она не инициализируется, я получаю ошибку Uncaught (in promise) InvalidValueError: st_initMap is not a function. Не уверен, почему, так как это карбоновая копия того, что появляется здесь: https://hscr.com/properties, только с полем ACF, которое позволяет выбрать, какие объекты появятся.
У меня также есть проблема с тем, что мои посты, которые я получил, неправильно считаются с помощью функции found_posts, так как это должно появляться там, где указано Showing – of properties within map area.
Поле ACF — это просто стандартное текстовое поле и должно передавать slug для таксономии пользовательского типа записи. Оно просто позволяет администратору ввести имя slug, и оно должно передавать остальную информацию.
Значение PROPERTIES_PAGE_SIZE установлено на 20 в файле wp-config.php (это сделал другой разработчик).
Я добавил код для начала страницы здесь:
global $post;
$term = get_field('term_to_use');
if ( !defined( 'PROPERTIES_PAGE_SIZE' ) ) define( 'PROPERTIES_PAGE_SIZE', 20 );
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$posts_per_page = PROPERTIES_PAGE_SIZE;
$args = array(
'post_type' => 'properties',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'post_status' => 'publish',
'paged' => $paged,
'tax_query' => array(
array(
'taxonomy' => 'location',
'field' => 'slug',
'terms' => $term,
'operator' => 'IN'
),
),
);
$mapproperty = new WP_Query( $args );
$count = $mapproperty->post_count;
$total_results = $mapproperty->found_posts;
$total_pages = ceil($total_results / $posts_per_page);
$map_locations = [];
$city_id = '';
$current_city = esc_html(get_field('google_location', $city_id));
Затем здесь есть условный оператор:
if ( $mapproperty->have_posts() ):
$property_data = [];
$property_data_cache = false; //закомментируйте на рабочем сайте, чтобы включить кэш
while( $mapproperty->have_posts() ) {
$mapproperty->the_post();
$id = get_the_ID();
Это извлекает правильные данные в правый список (хотя он не работает с пагинацией, что является другой проблемой).
Параметры карты Google установлены для инициализации здесь внизу файла php:
function st_initMap() {
const styledMapType = new google.maps.StyledMapType(
[
{
"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.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#404040"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#a75627"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "off"
}
]
},
{
"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",
"elementType": "labels.icon",
"stylers": [
{
"saturation": -50
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffcaa6"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a75728"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"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"
}
]
}
]
)
map = new google.maps.Map(document.getElementById('locations-map'), {
zoom: zoom,
center: center,
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map'],
mapTypeControl: false,
streetViewControl: false,
rotateControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
},
fullscreenControl: false,
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId("styled_map");
// Присоедините слушатель событий для выполнения после загрузки тайлов карты.
google.maps.event.addListenerOnce(map, 'idle', function() {
// После полной загрузки карты установите маркеры на карту.
st_setMarkers(map, js_locations);
});
}
</script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo ST_GMAPS_KEY; ?>&callback=st_initMap&loading=async&libraries=places" type="text/javascript"></script>
<div id="locations-map" class="property__map__container"></div>
ST_GMAPS_KEY также вызывается из файла wp-config.php (снова другим разработчиком). Я пытался ввести его вручную вместо этого, и это не имеет значения. Также пробовал удалить libraries=places и defer и async.. ничего, похоже, не влияет на инициализацию.
Буду признателен за любые советы или помощь в решении этой проблемы.
С уважением,
Крис
Ответ или решение
Для решения проблемы с инициализацией Google карты на указанной странице вам нужно тщательно проверить несколько аспектов. Трудности, судя по всему, связаны с некорректной инициализацией функции st_initMap, и потенциальными ошибками в настройках WordPress или ACF, что приводит к тому, что карта не отображается, а дополнительно возникает ошибка подсчета постов. Для полноты разбора давайте детализируем три основных направления работы.
Теоретическое обоснование
-
Некорректное определение функции
st_initMap: Ошибка "Uncaught (in promise) InvalidValueError: st_initMap is not a function" указывает на то, что функция, которая должна вызываться для инициализации карты, не определена к моменту, когда она вызывается. Это может быть вызвано неправильной последовательностью скриптов или использованием неправильного метода загрузки скрипта. -
Настройка ACF и WordPress: Модели WP_Query на основе условий, заданных в вашей функции, могут быть неверно настроены. Эти настройки зависят от корректности данных, переданных через поля ACF, и от правильной конфигурации WordPress.
-
Конфигурация Google Map API: Важно удостовериться, что корректный API ключ используется и на сервере нет ограничения, которое могло бы к этому ключу применять дополнительные требования.
Примеры аналогичных проблем
Примером может служить типичная ошибка, когда функция инициализации карты не называется должным образом в script теге. Часто это происходит по следующим причинам:
- Скрипт Google Maps API загружается после попытки вызова функции инициализации.
- Неправильно сформированы атрибуты в
scriptтеге, такие какdeferиasync, что меняет порядок загрузки скрипта. - Синтаксические ошибки в самом скрипте функции
st_initMap, из-за которых браузер не может его должным образом разобрать и выполнить.
Применение на практике
-
Проверка загрузки скриптов:
- Убедитесь, что тег
<script>для Google Maps API загружается после скриптов WordPress и других зависимостей. - Убедитесь в правильности использования
callback=st_initMap, которая должна быть строго идентична имени вашей функции на JavaScript. - Проверьте порядок в
wp_enqueue_script, убедитесь, что ваше преимущественное время для загрузки Google API идет после основной нагрузки страницы.
- Убедитесь, что тег
-
Проверка стиля скрипта карты:
Посмотрите на созданный стиле карты в
st_initMap. Здесь не должно быть ошибок, иначе JavaScript не сможет обработать стили и может выбросить исключение. -
Отладка WP_QUERY и ACF:
- Перепроверьте значение
$term, возвращаемое черезget_field('term_to_use'). Оно должно быть корректно сформированнымslug. - Убедитесь, что в
$argsиспользуются правильные значения, и если$termпустое, то WP_Query будет возвращать неожиданные результаты.
- Перепроверьте значение
-
Проверка API ключа Google:
Корректность Google Map API может быть одним из возможных затруднений. Откройте консоль разработчика в браузере и проверьте, возвращается ли ключ с ограничениями доступа.
-
Имитация условия на живой платформе:
Отключите кеширование через
property_data_cache = false, чтобы увидеть в реальном времени данные. Это может выявить проблемы в компоновке данных или конфигурации запроса.
Эти шаги должны помочь идентифицировать и исправить вашу текущую проблему. Если ошибки присутствуют по-прежнему, попробуйте облегчить скрипт, оставив только основу и сопровождаемый вывод в консоль, чтобы видеть выдает ли корректные данные или формы ошибка.