Create multiple marker map with ACF and leaflet

using the now more than famous ACF module, you can a the ACF Leaflet field type that allows to geo code an adress within any post type and easily integrate post map within content. But even better, you can query posts and make an aggregated map, easily !!

Yes, Open Street Map ACF field can return raw data of latitude and longitude.

With that, a simple query and you can add markers for each geocoded post :

   <style>#map { height: 180px; }</style>

                <div id="map" style="width: 600px; height: 400px;"></div>
                <script>

                    const map = L.map('map').setView([48.866667, 2], 5);

                    const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        maxZoom: 19,
                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                    }).addTo(map);


<?php

$args = array(
    'post_type' => 'wave_event',
    'category_name' => '',
    'posts_per_page' => 20,
);

$my_query = new WP_Query( $args );

if( $my_query->have_posts() ) : while( $my_query->have_posts() ) : $my_query->the_post();

  $arr=get_field("geoloc");
?> var marker = L.marker([<?=$arr["lat"]?>,<?=$arr["lng"]?>]).addTo(map);
                  
marker.bindPopup("<a href='<?=get_permalink()?>'><?=get_the_title()?></a>
<br><?php echo get_field("date_de_debut")?>  ").openPopup();

                    <?php
 

endwhile;
endif;
 
wp_reset_postdata();?>

More info

• coding leaflet map
• ACF OPEN STREET MAP FIELD get_field array reference