Как вывести метки на яндекс карту из кастомных полей wordpess?

Question

[MalykhinD]

Подскажите пожалуйста, есть сайт на wordpess, на нем есть записи с недвижимостью, каждая запись отображает один обьект, как сделать с помощью API Яндекс карт, чтобы на карте отображались все объекты. Был похожий вопрос, но информация уже устарела.

Answer 1

[Александр Соболев]

Возможно это поможет. Останется лишь написать ajax запрос координат из произвольных полей

Answer 2

[Артем Золин]

Посмотрите пример object_manager, примерно так вам нужно собрать данные записей в json для карты:

$args = array(
	'post_type'   => 'object',
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) {

	$mask = array();
	$mask['type'] = 'FeatureCollection';

	while ( $query->have_posts() ) {
		$query->the_post();

		$geo = get_post_meta( get_the_ID(), '_geo', true );

		$mask['features'][] = array(
			'type' => 'Feature',
			'id' => $key,
			'geometry' => array (
				'type' => 'Point',
				'coordinates' => [(float) $geo['lat'], (float) $geo['lat']],
			),
			'properties' => array (
				'balloonContentBody' => '<strong class="map-title"><a class="link" href="' . get_the_title() . '">' . get_the_title() . '</a></strong>',
				'balloonContentFooter' => '<a class="hidden" href="#">Я был здесь!</a>',
				'clusterCaption' => '<strong>' . get_the_title() . '</strong>',
				'hintContent' => '<strong>' . get_the_title() . '</strong>'
			)
		);

	}
}

Потом передаете эту переменную json_encode( $mask ) в обработчик в js. В поле _geo должен лежать массив: широта и долгота

PS Скрипт я выводил с помощью функции wp_add_inline_script(), это не супер подход, но, в моем случае было удобнее всего

wp_enqueue_script( 'ya-map-api' );

$ya_map_init .= "<script type='text/javascript'>

	jQuery(function($){

		ymaps.ready(init);

		function init () {
			var map = new ymaps.Map('ya-map', {
					center: [" . $geo_center . "],
					zoom: " . $geo_zoom . ",
					controls: ['geolocationControl' ,'zoomControl'],
				}, {
					avoidFractionalZoom: false,
				}),
				objectManager = new ymaps.ObjectManager({
					clusterize: false
				});


			objectManager.objects.options.set('preset', 'islands#nightCircleDotIcon');
			map.geoObjects.add(objectManager);

			var resortLabels = " . json_encode( $mask ) . ";
			objectManager.add(resortLabels);
		}

	});

</script>";

wp_add_inline_script( 'ya-map-api', $ya_map_init );

В контенте должен быть div и стили для него

<div id="map" class="map"></div>

Скрипт должен быть зарегистрирован

add_action( 'wp_enqueue_scripts', 'ya_scripts' );
function ya_scripts() {

	$ya_map_key = '96193550-a00q-czce-p3vb-uh52odq1qhil';
	wp_register_script('ya-map-api', 'https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=' . $ya_map_key . '', array('jquery'), null, true);

}

Если у вас десятки тысяч объектов, желательно куда-то кешировать эти данные и обновлять только когда обновился какой-то объект на сайте

Comments

[MalykhinD]

Я не особо силен в js и php, но суть понял.
1. Как получить значение _geo для всех записей (абсолютно всех), если я использую Advanced Custom Fields.
2. Как передать json_encode( $mask ) в обработчик в js.
(заранее извиняюсь за тупые вопросы)

[Артем Золин]

MalykhinD, 1. get_field(), скорее всего данные будут лежать не как у меня в примере
2. Обновил ответ