Как загружать яндекс карту с адресом из доп.поля?

Question

[Руслан Шадура]

Задача состоит в следующем: на странице записи нужно подгружать яндекс карту с адресом из дополнительного поля. Не подскажите каким образом можно это реализовать?
P.S. в поиске ничего подходящего не нашел.

Answer 1

[Александр]

Вот есть код прямого геокодирования в песочнице яндекс ссылка

Необходимо его совсем немного доработать, что бы из вашего произвольного поля данные подставлялись в параметр ymaps.geocode файла direct_geocode.js

как передать переменную (в вашем случае адрес из произвольного поля) в файл js описано тут

UPD 17:15
самому стало интересно, как это реализовать, и вот результат

В файлы где выводим карту пишем:

<?php
$adress = '<?php echo $adress[0];?>';       // получаем значение переменной
?>

тут $adress - изменяете на свою переменную

Далее пишем следующее

<script>
      //Определяется переменная, которая будет доступна для 
      // всех JavaScript, подключаемых на данной странице
      var js_ad = '<?php echo $adress; ?>';
 </script>

Подключаем скрипт карт

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

Подключаем наш файл со скриптом direct_geocode.js

в файле direct_geocode.js происходит обращение к переменной js_ad.

<script src="<?php echo get_template_directory_uri() ?>/page-templates/js/direct_geocode.js" type="text/javascript"></script>

не забудьте поменять путь до вашего файла

Делаем вывод самой карты в нужном нам месте на странице

<div id="map" style="width:100%; height:200px;"></div>

А вот код нашего скрипта direct_geocode.js

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

Собственно на этом все :)

UPD на основе комментария:
тут пишешь так

<?php
$address = get_the_title(); // подставляет текст из тайтла
?>

а тут так

<script>
      //Определяется переменная, которая будет доступна для 
      // всех JavaScript, подключаемых на данной странице. ПОДСТАВЛЯЕМ город
      var js_ad = 'Казань, <?php echo $adress; ?>';
 </script>

Comments

[Руслан Шадура]

Спасибо большое, позже попробую)

[Руслан Шадура]

Мужик помоги! такая проблема, если в переменную пихаю точный адрес (т.е. область\республика, город, улица и дом) то все нормально, а если значение беру из доп.поля, то показывает вообще китай. В доп поле формат - улица дом. Пытаюсь в переменную пристыковать область и город - результат неизменный (все равно китай показывает) что делать?

[Руслан Шадура]

Руслан Шадура: Вот код переменных (адрес берется из титла)
$title = get_the_title();
$adress = 'Республика Татарстан, Казань ' . '<?php echo $title[0];?>';

[Александр]

Руслан Шадура: Напиши текст который ставишь в доп поле и какое в переменную подставляешь

[Руслан Шадура]

Александр: титл это адрес состоящий из названия улицы и дома (Ленина 18), его в переменную и сую

[Александр]

Руслан Шадура: так ты ж говорил что из произвольного поля адрес берется... ладно не суть.. сейчас посмотрю

[Руслан Шадура]

Александр: изначально так и хотел, но потом переделал на титл. спасибо

[Руслан Шадура]

Александр: спасибо большое, все заработало)

[Александр]

Руслан Шадура: Пожалуйста!

[Nik Master]

А как здесь можно подставить координаты вместо адреса?