Как нанести метки на карту Яндекс из пользовательского типа записей WP

Хочу поделиться одним интересным решением, которое позволит связать карты яндекса и вордпресс без помощи плагинов. Работая над очередным проектом по недвижимости появилась задача реализовать автоматический сбор координат и нанесение меток с соответствующими координатами на карту яндекса. Готовых решений, удовлетворяющие все потребности, я не нашел, поэтому написал свое.

Я не стану расписывать весь код и обьяснять каждую строку, так как мой блог — это больше библиотека сниппетов, которые будут полезны для опытных разработчиков. Но если перед вами стоит подобная задача и код совсем не понятен — пишите мне лично, с радостью помогу решить задачу 🙂

И так.. возьмем код из песочницы яндекса, с помощью которого можно нанести множество меток на карту:

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 32,
            clusterDisableClickZoom: true
        });

    // Чтобы задать опции одиночным объектам и кластерам,
    // обратимся к дочерним коллекциям ObjectManager.
    objectManager.objects.options.set('preset', 'islands#greenDotIcon');
    objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
    myMap.geoObjects.add(objectManager);

    $.ajax({
        url: "data.json"
    }).done(function(data) {
        objectManager.add(data);
    });

}

Теперь остается только собрать все нужные данные и занести их в файл:

<?php require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' ); global $post; global $wpdb; ?>
<?php $markers = get_posts ('post_type=markers&order=ASC'); ?> 
<?php $arr = array(); ?>
  <?php if ($markers) :?>
    <?php foreach ($markers as $post) : setup_postdata ($post); ?>
      <?php $arr[get_the_ID()]['type'] = 'Feature'; $arr[get_the_ID()]['id'] = '0'; $arr[get_the_ID()]['geometry']['type'] = 'Point'; $arr[get_the_ID()]['geometry']['coordinates'] = array(55.831903, 37.411961); $arr[get_the_ID()]['properties']['balloonContent'] = 'Содержимое балуна'; $arr[get_the_ID()]['properties']['clusterCaption'] = 'Еще одна метка'; $arr[get_the_ID()]['properties']['hintContent'] = 'Текст подсказки'; ?>
    <?php endforeach; ?>
  <?php endif; ?>
<?php wp_reset_postdata(); ?>

<?php $array = array( "type" => "FeatureCollection",
    "features" => array_values($arr)
  );
?>
<?php echo json_encode($array); ?>
Поделиться в vk
VK
Поделиться в odnoklassniki
OK
Поделиться в facebook
Facebook
Поделиться в telegram
Telegram
Поделиться в whatsapp
WhatsApp
© 2019 Киселев Денис. Все права защищены
Киселев Денис
27 лет

Разработкой сайтов я занимаюсь с 2011 года. Начинал с азов фотошопа, затем освоил верстку сайтов, далее изучил API Wordpress и других популярных движков сайта. Мои навыки позволяют разработать сайт под ключ, от дизайна до разработки сложного функционала сайта. На данный момент я специализируюсь на Front-end разработке. Фронтэнд разработчик — это тот человек, который совмещает в себе и художника, и программиста, и инженера. Фронтенд разработчик владеет большим количеством навыков в смежных областях сайтостроения. Отлечительной чертой фронтэнд разработчика является особое внимание к мелочам и чувство стиля.

Красивые галереи, слайдеры, аккордионы и табы, адаптивная и кросбраузерная верстка, модальные окна и формы обратной связи, различные API и масса других новых и революционных технологий — всем этим занимается фронтэнд разработчит, всем этим занимаюсь и я.

Ищи меня в социальных сетях:
Заинтересованы в совместной работе?
напишите мне