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

Товарищи, подскажите пожалуйста, есть сайт на вордпрессе, на нем есть отдельный тип записей под названием магазины. Каждая запись отображает один магазин. В каждой записи есть произвольное поле "Адрес". Как можно сделать с помощью API Яндекс карт, чтобы на карте отображались все магазины, у которых заполнено поле "Адрес"? И чтобы при добавлении нового магазина он появлялся на карте?
  • Вопрос задан
  • 2789 просмотров
Решения вопроса 1
azerphoenix
@azerphoenix
Java Software Engineer
Здравствуйте!
Нечто похожее нам приходилось реализовать для одного клиента.
Единственное отличие - метка добавляется не из катомных записей, а на конкретной странице, на которой при помощи 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...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы