Листовка с бесконечной прокруткой - обратный вызов ajax

Question

Новый для leaflet.js и пытающийся загрузить карты после вызова ajaxcomplete на странице бесконечной прокрутки, в настоящее время карты отображаются на первой странице:

<div id="mapid-<?php the_ID(); ?>"></div>
<?php 
      $location = get_field('map');
      if( !empty($location) ):
        $lat = @$location['lat'];
        $lng = @$location['lng'];
      endif;

      if($lat!="" and $lng !="") { ?>
<script>
    var mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
    var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light'})
    var mymap = L.map('mapid-<?php the_ID(); ?>', {
                center: [<?php echo $lat; ?>, <?php echo $lng; ?>],
                zoom: 13,
                layers: [grayscale],
                zoomControl: false,
                attributionControl: false,
                dragging: false,
                scrollWheelZoom: false
            });
    var myIcon = L.icon({
                iconUrl: 'https://cicom.staging.wpengine.com/wp-content/themes/smart-mag/images/ci-marker.png'});
    L.marker([<?php echo $lat; ?>, <?php echo $lng; ?>],{icon: myIcon}).addTo(mymap);
</script> 
<?php }  ?>

Но когда я достигаю нижней части страницы и загружаю вторую страницу, используя бесконечную прокрутку, я получаю только div с mapid, но скрипт с кодом листовки не загружается. Какие-либо предложения? Спасибо!