Как вывести координаты Яндекс.карты в админке Wordpress?

Question

[karelina-nat]

Как сделать, чтобы клиент мог в случае изменения адреса отредактировать сам свои координаты в админке вордпресса.

Пусть в файле скриптов лежит скрипт яндекс.карт.

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

На странице, в которой нужна карта (contacts.php, например):

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

Что нужно добавить в functions.php и в contacts.php, чтобы скрипт, во-первых, заработал и карта появилась на сайте, а во вторых, чтобы вывести

center: [55.76, 37.64],

в админку для редактирования

Comments

[Антон Р.]

Можно сделать поле с адресом и потом этот адрес передавать в api Яндекс Карт получая на выходе карту с точкой https://tech.yandex.ru/maps/mapsapi/

[Lord_Dantes]

ACF полем сделать ввод

Answer 1

[karelina-nat]

Нашла решение, благодаря ответу на вопрос здесь: Вопрос
Только я немного под себя переделала код. Может кому пригодиться.

Первым делом подключим скрипты яндекс.карт. Обратите внимание, что все скрипты я подключаю на хуке wp_footer, поэтому подключение API яндекс.карт должно быть производиться раньше, чем скрипт js.

В файле functions php нужно сделать следующее:

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, адрес, естественно, указываете свой

Теперь, что нужно прописать на странице, где у нас будет подключена карта:

<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">  
// это контейнер, в котором будет отображена карта

На класс map-yandex у меня повешены стили карты, например, такие:

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

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

И наконец вставляем скрипт из геокодера яндекс.карт:
Геокодер
и вставляем туда нашу переменную js_ad

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