How to display tags on a Yandex map by taking addresses from custom fields of records?

Question

Yandex maps

Comrades, tell me please, there is a website on WordPress, it has a separate type of posts called stores. Each entry displays one store. Each entry has a custom field "Address". How can I use the Yandex Maps API to display all the stores that have the "Address" field filled in on the map? And so that when you add a new store, it appears on the map?

Answer 1

Hello!
We had to implement something similar for one client.
The only difference is that the label is added not from atomic records, but on a specific page on which custom fields are created using ACF Repeater.
Brief instructions:
1) Create an ACF Repeater field + 2 custom fields Latitude and Longitude and display on the page
2) Using Yandex maps ( https://yandex.ru/maps/) , the client finds the coordinates of the object and writes it through the repeater in custom fields Latitude and longitude.
3) Create a template (copy page.php) and assign it to the page you created.
An example of such a pattern:
There is extra code in this code. But I think that you will find the necessary sites ...

Template example

<div class="container content-page">
    <div class="page-content">
      <div class="row">
        <div class="content col-md-12">
          <div id="customMap" class="YMaps" style="width:100%;height:400px;">
          </div>
          <?php if( have_rows('example_mebel') ): ?>
            <?php $yamap = [];?>
            <?php while( have_rows('example_mebel') ): the_row(); ?>
              <!-- baloon content -->
              <?php $example_title = get_sub_field('example_title') ?>
              <?php $example_address = get_sub_field('example_address') ?>
              <?php $example_phone = get_sub_field('example_phone') ?>
              <?php $example_time = get_sub_field('example_time') ?>
              <?php 

  $example_placemark_type = array
  ("twirl#darkgreenStretchyIcon","twirl#greenStretchyIcon"); 

                // $example_placemark_type = array("twirl#redIcon", "twirl#darkblueIcon", "twirl#pinkIcon", "twirl#darkorangeIcon", "twirl#violetIcon"); 
              ?>
              <!-- baloon content -->
              <?php $tempID = get_sub_field( 'example_id'); ?>
              <?php $cityName = get_sub_field( 'example_city'); ?>
              <?php if( have_rows('example_places') ): while( have_rows('example_places') ): the_row();  ?>
                <?php $example_longitude = get_sub_field( 'example_longitude'); ?>
                <?php $example_lattitude = get_sub_field( 'example_lattitude'); ?>
                
              
              <!---->

              <?php
                array_push
                (
                  $yamap,
                  [
                    "lat" => $example_lattitude,
                    "lon" => $example_longitude,
                    "header" => $example_title,
                    "address" => $example_address,
                    "time" => $example_time,
                    "footer" => $example_phone,
                    "placemark" => $example_placemark_type[array_rand($example_placemark_type)],
                    "id" => $tempID,
                    "city" => $cityName
                  ]
                );

              ?>
                <?php endwhile; endif; ?>
            <?php endwhile; ?>
          <?php endif; ?>
        </div>
        <div style="padding: 10px 0 !important; clear: both;"></div>
        <div class="content col-md-12">
          <?php if( have_rows('example_mebel') ): ?>
            <div class="example_accordion">
              <div class="panel-group" id="accordion">

            <?php while( have_rows('example_mebel') ): the_row(); ?>
              
              <!--example_places-->
                <!-- begin object -->
                
                    <!-- ** -->
                    <?php if ($example_title = get_sub_field('example_title')) { ?>
                      <?php ($example_id = get_sub_field('example_id')); ?>
                    

                     
                      <div class="panel panel-default">
                        <div class="panel-heading">
                        <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo $example_id ?>"><?php echo $example_title ?><?php if ($example_city = get_sub_field('example_city')) { ?><span style="float:right;"><?php echo $example_city  ?></span><?php } ?></a>
                        </h4>
                        </div>
                        <div id="<?php echo $example_id ?>" class="panel-collapse collapse">
                        <div class="panel-body">
                          <?php if ($example_address = get_sub_field('example_address')) { ?>
                            <div class="faq_answer"><span class="fa fa-map-marker"><?php echo $example_address ?></span></div>
                          <?php } ?>
                          <?php if ($example_time = get_sub_field('example_time')) { ?>
                            <div class="faq_answer"><span class="fa fa-clock-o"><?php echo $example_time ?></span></div>
                          <?php } ?>
                          <?php if ($example_phone = get_sub_field('example_phone')) { ?>
                            <div class="faq_answer"><span class="fa fa-phone"><?php echo $example_phone ?></span></div>
                          <?php } ?>
                          <?php if ($example_mail = get_sub_field('example_mail')) { ?>
                            <div class="faq_answer"><span class="fa fa-at"><?php echo $example_mail ?></span></div>
                          <?php } ?>
                          <div class="gallery">
                            <?php $images = get_sub_field('example_gallery');
                              if( $images ): ?>
                                <ul>
                                  <?php foreach( $images as $image ): ?>
                                    <li>
                                      <a href="<?php echo $image['url']; ?>">
                                         <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                                      </a>
                                    </li>
                                  <?php endforeach; ?>
                                </ul>
                            <?php endif; ?>
                          </div>
                        </div>
                        <div class="panel-footer">
                          
                        </div>
                        </div>
                      </div>
                      
                    <?php } ?>
                
                <!-- end object -->
            <?php endwhile; ?>
              </div>
            </div>
          <?php endif; ?>
        </div>
      </div><!-- end row-fluid -->
    </div>
  </div><!-- end container -->
<?php echo "<script type=\"text/javascript\"> var points=".json_encode($yamap, true)."</script>" ?>;

4) Next, connect 2 scripts for this page:

function register_scripts_map() {
    wp_register_script('custom', get_stylesheet_directory_uri() .
      '/js/custom.js');
    wp_enqueue_script('custom');	
    wp_register_script("yMapJS", "https://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU");
    wp_enqueue_script("yMapJS");
}

add_action('wp_enqueue_scripts', 'register_scripts_map');

5) The content of the custom.js script

custom script

var zoom = 16,
    // mapCenter = [55.709992,37.654287];
    // mapCenter = [points[0].lat, points[0].lon],
    referenceCity = ['Москва', 'Санкт-Петербург'],
    mapAlwaysReady = false;    
var customMap,
    mapCenter;
function showCurrentPlace(event)
{
    event.preventDefault();
    var currentSelectedItem = jQuery(this).find('a').attr('href').substr(1),
    currentSelectedPoint = 
        points.filter(function(item){return item.id == currentSelectedItem;})[0];
    if(mapAlwaysReady)
    {        
        customMap.setCenter([currentSelectedPoint.lat, currentSelectedPoint.lon]);
        customMap.setZoom(zoom);
    }    
    console.table(currentSelectedPoint);
}

function getMinMax(sourceArray, field)
{
    var maxPrice = Math.max.apply(Math, sourceArray.map(function(item){return item[field];})),
        minPrice = Math.min.apply(Math, sourceArray.map(function(item){return item[field];})) 
    return {max: maxPrice, min: minPrice};
}
function mapReady()
{   
    customMap = new ymaps.Map('customMap', 
    {
        center: mapCenter,
        zoom: zoom
    });

    points.forEach(function(item)
    {
        customMap.geoObjects.add
        (
            new ymaps.Placemark
            (
                [item.lat, item.lon], 
                {
                    iconContent: item.header, 
                    balloonContentHeader: item.header, 
                    balloonContentBody: 
                        item.address + 
                        '<br>' +
                        item.time
                        , 
                    balloonContentFooter: item.footer
                },
                {
                    preset: item.placemark //"twirl#pinkStretchyIcon"
                }
            )
        );    
    });
    mapAlwaysReady = true;    
    var tempBounds = points.reduce
    (
        function(prev, cur)
        {       
            // return referenceCity.filter(function(itemCity)
            // {
            //     return itemCity == cur.city;
            // }).length > 0 ? prev.concat({lat: cur.lat, lon: cur.lon}) : prev; 
            return prev.concat({lat: cur.lat, lon: cur.lon});
        }, 
        []
    ),
    referenceBounds = 
    {
        lats: getMinMax(tempBounds, 'lat'),
        longs: getMinMax(tempBounds, 'lon'),
    };
    customMap.setBounds
    (
        [
            [referenceBounds.lats.min, referenceBounds.longs.min], 
            [referenceBounds.lats.max, referenceBounds.longs.max]
        ]
    );
}

End result - https://massimomebel.com/gde-kupit
Of course, you will have to modify the script to collect tags from custom posts, not from the page. But in general the idea is the same.
If you are satisfied with the idea of ​​adding markers based on Google Maps, then here is a detailed instruction on integrating with CPT https://wpbeaches.com/create-multiple-marker-map-f...