Здравствуйте!
Нечто похожее нам приходилось реализовать для одного клиента.
Единственное отличие - метка добавляется не из катомных записей, а на конкретной странице, на которой при помощи ACF Repeater созданы кастомные поля.
Краткая инструкция:
1) Создайте поле ACF Repeater + 2 кастомных поля Широта и Долгота и выведите на странице
2) При помощи яндекс карт (
https://yandex.ru/maps/) клиент находит координаты объекта и прописывает его через repeater в кастомные поля Широта и Долгота.
3) Создайте шаблон (скопируйте page.php) и назначьте его для созданной вами страницы.
Пример подобного шаблона:
В данном коде присутствует лишний код. Но думаю, что вы найдете необходимые участки...
Пример шаблона<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) Далее подключите 2 скрипта для данной страницы:
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) Содержимое скрипта custom.js
custom скрипт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]
]
);
}
Конечный результат -
https://massimomebel.com/gde-kupit
Конечно же вам придется переделать скрипт, чтобы собирать метки из кастомных записей, а не со страницы. Но в целом идея похожа.
Если вас устроит идея добавления маркеров на основе Google Maps, то тут подробная инструкция об интеграции с CPT
https://wpbeaches.com/create-multiple-marker-map-f... 