Интеграция PHP в Javascript для отображения маркеров на карте с помощью Google API – проблема с wp_localize

Я бы отображал маркеры Google карты на пользовательском сайте с помощью Google API maps. Я делаю все, как в этом посте: Интеграция PHP в Javascript для отображения маркеров карты с Google API

Но консоль выдает мне ошибку, я не знаю, где я могу искать ошибку.

(index):774 Uncaught (in promise) ReferenceError: storeData is not defined
at initMap ((index):774)
at js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap:123
at js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap:123

Я думаю, WordPress сначала пытается использовать wp_localize, затем загружает jquery. Или WordPress не знает, как подключить jquery-core с jquery CDN.

Код моего пользовательского сайта:

<?php /* Template Name: Mapy */ ?>

<?php get_header(); ?>

<?php
    $storeData = [];
        $args = array( 'post_type' => 'product');
        $loop = new WP_Query( $args );

        foreach ($loop->posts as $post){
            $storeData[] = [
                'title' => apply_filters('the_title', $post->post_title),
                'lat'   => get_field('gps_dlugosc'),
                'long'  => get_field('szerokosc_gps')
            ];
        }
    wp_localize_script('jquery-core', 'storeData', $storeData);

?>

<section style="padding-top:70px;">
    <div id="map"></div>
</section>

<script>
    // Инициализация и добавление карты
    function initMap() {
      // Положение Uluru
      var poznan = {lat: 52.402684, lng: 16.9213905};
      var j = storeData.length;
      //console.log(storeData.length);    
      // Карта, центрированная на Uluru
      var map = new google.maps.Map(
          document.getElementById('map'), {
              zoom: 15,
              center: poznan,
              zoomControl: true,
              mapTypeControl: true,
              scaleControl: false,
              streetViewControl: false,
              rotateControl: false,
              fullscreenControl: true,
          }
      );

        for (var i=0; i<5; i++) {
            var marker=new google.maps.Marker({
                position: new google.maps.LatLng({lat: storeData[i].lat, lng: storeData[i].long}),
                map: map,
                title: storeData[i].title
            });
        }
    }

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap"></script>

<?php get_footer(); ?>

Спасибо за помощь, извините, я не очень хорошо знаю английский.

Хорошо, в вашем коде есть несколько недоразумений…

1. Вы должны локализовать свой собственный скрипт, а не встроенный.

Вы не можете быть уверены, какие скрипты будут использоваться на сайте. В вашем случае вы локализуете скрипт jquery-core, но не гарантируете, что этот скрипт зарегистрирован на сайте.

Это означает, что ваша локализационная переменная может не быть включена на вашей странице (и в вашем случае это так).

2. Вы должны локализовать скрипты до их вывода.

Ваш код локализует скрипт непосредственно в шаблоне. Было бы намного лучше, если бы вы сделали это внутри functions.php.

Но есть еще большая проблема – вы локализуете этот скрипт после вызова get_header(). Это означает, что скрипт может уже быть выведен, поэтому он не будет локализован…

Как это исправить?

1. Переместите ваш JS-код:

function initMap() {
    ...  
}

в какой-нибудь внешний файл типа my-map-script.js.

2. Регистрируйте и локализуйте его правильно

function my_enqueue_map_scripts() {

    if ( is_page(123) ) { // вы можете зарегистрировать его только для данной страницы, просто удалите этот if, если он должен быть доступен глобально

        wp_enqueue_script( 'my-map-script', get_template_directory_uri() . '/js/ma-map-script.js', array(), '1.0.0', true );

        $storeData = [];
        $args = array( 'post_type' => 'product');
        $loop = new WP_Query( $args );

        foreach ($loop->posts as $post){
            $storeData[] = [
                'title' => apply_filters('the_title', $post->post_title),
                'lat'   => get_field('gps_dlugosc'),
                'long'  => get_field('szerokosc_gps')
            ];
        }
        wp_localize_script('my-map-script', 'storeData', $storeData);
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_map_scripts' );