Pass acf fields to Leaflet JS - php

Question

I found this example on the internet that comes pretty close to what I want to do.
I have some ACF fields with the latitude and longitude of some markers, I am trying to show all the markers of the custom post type place in the same map.
But I only get 1, what am I doing wrong?
I think is something related with the marker div
<?php /* Template Name: Demo Page Template */ get_header(); ?>
<h1 class="main-title"><?= post_type_archive_title(); ?></h1>
<section class="list-cases">
<div class="container">
<div class="row position-relative">
<?php
$args = array(
'post_type' => 'lugar',
'posts_per_page' => 10,
);
$query = new WP_Query( $args );
?>
<?php $counter = 1; ?>
<?php while( $query->have_posts() ) : $query->the_post() ?>
<div class="item-case-<?= $counter ?> col-md-12" data-hover="<?= $counter ?>" data-aos="fade-up"
data-aos-duration="2000">
<div class="case-container">
<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
<p><?php the_field('subtitle') ?></p>
<p><?php the_field('address') ?></p>
<p><strong>Latitud:</strong> <?php the_field('lat') ?></p>
<p><strong>Longitud:</strong> <?php the_field('lon') ?></p>
</div>
</div>
<?php $counter++; ?>
<?php endwhile; wp_reset_postdata(); ?>
</div>
</div>
</section>
<style>
#map,
#acf-map {
height: 500px;
}
</style>
<div id="map" style="width: 600px;">
</div>
<div class="marker" data-lat="<?php echo the_field('lat') ?>" data-lng="<?php the_field('lon'); ?>"
data-title="<?php the_field('subtitle') ?>" data-url="<?php echo 'link'; ?>"
data-category="<?php echo 'category'; ?>"></div>
<script>
$(document).ready(function () {
var map = L.map('map').setView([39.8410802, -0.1191397], 8);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoiamFtYWxkb2xzIiwiYSI6ImNrYmF2bGowOTBycGEyeG84b2F2NGlsYWkifQ.9rqymFnsW79aCkAFGCo0XQ'
}).addTo(map);
var marker = [];
$.each($('.marker'), function () {
var lat = $(this).attr('data-lat');
var lng = $(this).attr('data-lng');
var name = $(this).attr('data-title');
var link = $(this).attr('data-url');
console.log('Marker es: ' + marker);
marker = [name, lat, lng, link];
console.log('Y ahora es: ' + marker);
console.log(marker);
});
var markers = [marker];
console.log(markers);
console.log(markers.length);
for (var i = 0; i < markers.length; i++) {
marker = new L.marker([markers[i][1], markers[i][2]])
.bindPopup(markers[i][0])
.addTo(map);
}
});
</script>

Answer 1

Please make sure that you are echo-ing the custom field values.
Example: data-lat="<?php echo get_field('lat'); ?>" and data-lat="<?php echo get_field('lon'); ?>"

Answer 2

You need to put the div.marker into the loop to display multiple markers with the custom lat-long values.
<?php while( $query->have_posts() ) : $query->the_post() ?>
<div class="marker"
data-lat="<?php echo get_field( 'lat' ) ?>"
data-lng="<?php echo get_field( 'lon' ); ?>"
data-title="<?php echo get_field( 'subtitle' ) ?>"
data-url="<?php echo 'link'; ?>"
data-category="<?php echo 'category'; ?>" >
</div>
<?php endwhile; wp_reset_postdata(); ?>
Also, I would modify your javascript so it will look like this:
var markers = [];
$.each($('.marker'), function () {
var marker = [];
var lat = $(this).attr('data-lat');
var lng = $(this).attr('data-lng');
var name = $(this).attr('data-title');
var link = $(this).attr('data-url');
console.log('Marker es: ' + marker);
marker = [name, lat, lng, link];
console.log('Y ahora es: ' + marker);
console.log(marker);
markers.push( marker );
});
console.log(markers);
console.log(markers.length);
for (var i = 0; i < markers.length; i++) {
marker = new L.marker([markers[i][1], markers[i][2]])
.bindPopup(markers[i][0])
.addTo(map);
}