How to display Yandex.map coordinates in the Wordpress admin panel?

Question

Yandex maps

How to make the client be able to edit his own coordinates in the WordPress admin panel if the address changes.

Let the script file contain the Yandex.map script.

ymaps.ready(init);    
        function init(){ 
            var myMap = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 7
            }); 
        }

On the page that needs a map (contacts.php, for example):

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

What needs to be added to functions.php and contacts.php so that the script, firstly, will work and the map will appear on the site, and secondly, to display

center: [55.76, 37.64],

to the admin for editing

Answer 1

I found a solution, thanks to the answer to the question here: Question
Only I changed the code a little for myself. Maybe someone will come in handy.
First of all, we will connect the Yandex.map scripts. Please note that I connect all scripts on the wp_footer hook, so the Yandex.maps API must be connected before the js script.
In the functions php file you need to do the following:

add_action('wp_footer', 'ya_map_scripts'); // Подключаем скрипт с API карт
add_action('wp_footer', 'js_scripts'); // Подключаем скрипт js

function ya_map_scripts() {
       wp_enqueue_script('ymaps', 'https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=ВашКлючAPI"', [], null, true);
} // Скрипт яндекс.карт

function js_scripts()
{
    wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.min.js');
}  // Скрипт js, адрес, естественно, указываете свой

Now, what needs to be written on the page where we will have a map connected:

<script>
//Определяется переменная, которая содержит адрес вашего объекта
      var js_ad = '<?php echo the_field('adres_na_ostalnyh_straniczah', 'option'); ?>';
//В моем случая я подключила поле из страницы опций.
// Можно подключить, например, кастомное поле через плагин ACF
//Тогда это будет выглядеть как var js_ad = '<?php echo the_field('название_поля'); ?>';
 </script>

<div id="map" class="map-yandex">  
// это контейнер, в котором будет отображена карта

I have map styles hung on the map-yandex class, for example, these:

.map-yandex {
    overflow: hidden;
    width: 100%;
    height: 502px;
    position: relative;

    @media (max-width: map-get($tablet, lg)) {
        pointer-events: none;
    }
}

And finally, we insert the script from the Yandex.map geocoder:
Geocoder
and insert our js_ad variable there

ymaps.ready(init);

 function init() {
     var myMap = new ymaps.Map('map', {
         center: [55.753994, 37.622093], // поменяйте местоположение центрирования карты, можно воспользоваться сервисом https://constructor.maps.yandex.ru/location-tool/
         zoom: 9
     });

     // Поиск координат центра значения нашей переменной js_ad.
    // Строку Россия я сделала на всякий случай, если карты вдруг захотят убежать в другую страну
     ymaps.geocode('Россия,' + js_ad, {
         /**
          * Опции запроса
          * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geocode.xml
          */
         // Сортировка результатов от центра окна карты.
         // boundedBy: myMap.getBounds(),
         // strictBounds: true,
         // Вместе с опцией boundedBy будет искать строго внутри области, указанной в boundedBy.
         // Если нужен только один результат, экономим трафик пользователей.
         results: 1
     }).then(function (res) {
         // Выбираем первый результат геокодирования.
         var firstGeoObject = res.geoObjects.get(0),
             // Координаты геообъекта.
             coords = firstGeoObject.geometry.getCoordinates(),
             // Область видимости геообъекта.
             bounds = firstGeoObject.properties.get('boundedBy');

         // Добавляем первый найденный геообъект на карту.
         myMap.geoObjects.add(firstGeoObject);
         // Масштабируем карту на область видимости геообъекта.
         myMap.setBounds(bounds, {
             // Проверяем наличие тайлов на данном масштабе.
             checkZoomRange: true
         });

         /**
          * Все данные в виде javascript-объекта.
          */
         console.log('Все данные геообъекта: ', firstGeoObject.properties.getAll());
         /**
          * Метаданные запроса и ответа геокодера.
          * @see https://api.yandex.ru/maps/doc/geocoder/desc/reference/GeocoderResponseMetaData.xml
          */
         console.log('Метаданные ответа геокодера: ', res.metaData);
         /**
          * Метаданные геокодера, возвращаемые для найденного объекта.
          * @see https://api.yandex.ru/maps/doc/geocoder/desc/reference/GeocoderMetaData.xml
          */
         console.log('Метаданные геокодера: ', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData'));
         /**
          * Точность ответа (precision) возвращается только для домов.
          * @see https://api.yandex.ru/maps/doc/geocoder/desc/reference/precision.xml
          */
         console.log('precision', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData.precision'));
         /**
          * Тип найденного объекта (kind).
          * @see https://api.yandex.ru/maps/doc/geocoder/desc/reference/kind.xml
          */
         console.log('Тип геообъекта: %s', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData.kind'));
         console.log('Название объекта: %s', firstGeoObject.properties.get('name'));
         console.log('Описание объекта: %s', firstGeoObject.properties.get('description'));
         console.log('Полное описание объекта: %s', firstGeoObject.properties.get('text'));

         /**
          * Если нужно добавить по найденным геокодером координатам метку со своими стилями и контентом балуна, создаем новую метку по координатам найденной и добавляем ее на карту вместо найденной.
          */
         /**
          var myPlacemark = new ymaps.Placemark(coords, {
          iconContent: 'моя метка',
          balloonContent: 'Содержимое балуна <strong>моей метки</strong>'
          }, {
          preset: 'islands#violetStretchyIcon'
          });

          myMap.geoObjects.add(myPlacemark);
          */
     });
 }