Задать вопрос
NikMaster777
@NikMaster777

Почему карта Яндекс не отображается в попап?

С помощью Elementor сделал попап, вставил туда карту, но при открытии белый лист. В чём может быть причина?

<div id="main-map" style="width: 100%; height: 300px;"></div>


jQuery(document).ready(function($) {
    if (typeof ymaps === 'undefined') {
        $.getScript('https://api-maps.yandex.ru/2.1/?apikey=API-KEY=ru_RU', function() {
            ymaps.ready(initMap);
        });
    } else {
        ymaps.ready(initMap);
    }

    function initMap() {
		console.log("Карта инициализирована");
        var productData = window.productData;
        var map = new ymaps.Map('main-map', {
            center: [59.942871, 30.302284],
            zoom: 14
        });

        // Создаем объект кластеризатора
        var clusterer = new ymaps.Clusterer({
            clusterDisableClickZoom: true,
			clusterBalloonLeftColumnWidth: 200
        });
		
        for (var i = 0; i < productData.length; i++) {
            var latitude = parseFloat(productData[i].latitude);
            var longitude = parseFloat(productData[i].longitude);
            var address = productData[i].address;
			
			var productTitle = productData[i].productTitle;

            var placemark = new ymaps.Placemark([latitude, longitude], {
				balloonContentHeader: productTitle,
                balloonContentBody: address + '<br><a href="' + productData[i].productURL + '">Подробнее</a>'
            }, {
                preset: 'islands#blueDotIcon',
                maxWidth: 300
            });

            clusterer.add(placemark); // Добавляем метку в кластеризатор
        }

        map.geoObjects.add(clusterer); // Добавляем кластеризатор на карту
    }
});


function add_map_script_to_home_page() {
    wp_enqueue_script('display-map-script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1
    );

    $products = new WP_Query($args);

    $product_data = array();
    while ($products->have_posts()) {
        $products->the_post();
        $product_id = get_the_ID();
        $latitude = get_field('latitude', $product_id);
        $longitude = get_field('longitude', $product_id);
        $address = get_field('address', $product_id);
        $product_title = get_the_title($product_id);

        if ($latitude && $longitude && $address) {
            $product_data[] = array(
                'latitude' => $latitude,
                'longitude' => $longitude,
                'address' => $address,
                'productURL' => get_permalink($product_id),
                'productTitle' => $product_title
            );
        }
    }

    wp_reset_query();

    wp_localize_script('display-map-script', 'productData', $product_data);
}
add_action('wp_enqueue_scripts', 'add_map_script_to_home_page');
  • Вопрос задан
  • 81 просмотр
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы