Pass acf fields to Leaflet JS

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"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      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

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);
}

Answer 2

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'); ?>"