WordPress вывод нескольких точек адресов на Яндекс карту с помощью js и PHP и плагина кастомных типов записей и дополнительных полей



Готовый скрипт на php и js для вывода яндекс карты с кластеризацией в Wordpress

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

Готовый код вывода карты

<script type="text/javascript">
    ymaps.ready(function () {
        var myMap = new ymaps.Map('map', {
        center: [55.751574, 37.573856],
        zoom: 8,
        behaviors: ['default', 'scrollZoom']
    }),
    clusterer = new ymaps.Clusterer({
        preset: 'islands#invertedDarkBlueClusterIcons',
        groupByCoordinates: false,
        clusterDisableClickZoom: true,
        clusterHideIconOnBalloonOpen: false,
        geoObjectHideIconOnBalloonOpen: false
    }),
<?php 
    $args = array(
    'post_type' => 'point',
    'publish' => true,
    'paged' => get_query_var('paged'),
    'posts_per_page' => -1,
    );
    $adresa = array();
    query_posts($args);
    if (have_posts()) {
        while (have_posts()) {
            the_post(); 
            $adresa[] = get_post_meta($post->ID, '',true);
        }
    }
?>
    getPointData = [
        <?php foreach ($adresa as $adres) {
            $manager = isset($adres['wpcf-company-adress'][0]) ? "<div class='ballon-point'>Адрес: ".$adres['wpcf-company-adress'][0] : "";
            $ploshad = isset($adres['wpcf-company-underground'][0]) ? "<br> Ближайшее метро: ".$adres['wpcf-company-underground'][0] : "";
            $adrestext = isset($adres['wpcf-company-hours-job'][0]) ? " <br>".$adres['wpcf-company-hours-job'][0] : "</div>";
            echo "{balloonContentBody: \"".$manager.$ploshad.$adrestext."\", clusterCaption: \"".$adrestext."\"},";
        } ?>
    ],  
    getPointOptions = function () {
        return {
            preset: 'islands#redDotIcon'
        };
    },
    points = [
        <?php foreach ($adresa as $adres) {
            echo "[".$adres['wpcf-company-coordinates'][0]."],";
        } ?>
    ],
    geoObjects = [];
    for(var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points[i], getPointData[i], 
        getPointOptions());
    }
    clusterer.options.set({
        gridSize: 80,
        clusterDisableClickZoom: true
    });
    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);
    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true
    });
    myMap.behaviors.disable('scrollZoom');
    });

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

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

Сразу оговорюсь что я просто копировал код и другого своего сайта где была схожая карта и там выводились объекты недвижимости а скопировал я на сайт с арендой авто, где выводятся точки проката где можно получить авто, поэтому в названиях переменных можно увидеть полную чушь, но не обращайте внимания, на тот момент я совсем не шарил не в js не в php (да и сейчас особо далеко не уехал) и сегодня я бы более красиво и по человечески это написал, но если работает, смысла трогать нет.

Разбор кода, что поменять чтобы все заработало

Итак пробежимся по частям кода которые вам нужно будет изменить: 'post_type' => 'point', где point это тип записи, созданный плагином toolset types, которым я создал новый тип в котором публикую все нужные точки проката с адресами, меняеет point на свой тип записи.

Здесь $adresa[] = get_post_meta($post->ID, '',true); мы получаем все данные дополнительных полей нашего типа записи point и держим их "на готове" чтобы вывести на карту, дополнительные поля я создал тем же плагином, у меня там были поля адрес, описание, координаты и еще что-то.

Получаем данные конкретных полей и сразу указываем скрипту какой адрес показать в текстовом виде при клике на метку: $manager = isset($adres['wpcf-company-adress'][0]) ? "Адрес: ".$adres['wpcf-company-adress'][0] : "";  в $manager у нас отравляется сам адрес нашей точки в текстом виде, для его получения надо смотреть в поле под названием wpcf-company-adress , которое создано плагином в который я руками адрес пишу при создании филиала. Соседние переменные $ploshad и $adrestext (на самом деле в них я помещаю часы работы филиала и ближайшее метро, просто имена переменных от старого кода остались, было некогда исправлять, просто указал чтобы не запутались).

В echo "{balloonContentBody: опять перечисляем эти переменные.

В echo "[".$adres['wpcf-company-coordinates'][0]."],"; мы перебираем и получаем все координаты всех точек из поля координат, я их вручную указывал при создании филиала.

Заключение

По факту вы можете в этом коде изменить только название типа записи points на свое и изменить имена дополнительных полей которые у меня начинаются с префикса wpcf-  и все будет прекрасно работать. Главное уловить логику, что мы 1- создаем тип записей какой нам нужен, например у вас сеть шиномонтажей и хотите все на одну карту вставить, создаем тип записей шиномонтаж, далее у этого типа записей создаем поля ближайшее метро, часы работы, координаты, адрес, фото и еще что-то, что вы хотите увидеть. 2 - вставляем скрипт вывода карты и подставляем название своего типа записи и имена нужных переменных, тестируем и радуемся.


Также рекомендую к ознакомлению


avatar
  Подписаться  
Уведомление о
Сергей
Гость
Сергей

У меня не работает

подключал краты по api с новым ключом.

Создал тип записи и поля к нему.

Указал все в скрипте. И ничего не работает (

Алексей
Гость
Алексей

Благодарю за код! Все прекрасно работает.

А не подскажите, как можно в балуне вывести ссылку на пост? Я вывел доп.поле и его хочу обернуть в ссылку, которая ведет на сам пост.

Как я понял, ссылку поста можно получить с помощью get_post_permalink(); Но куда и как вставить это в вашем примере, я не знаю….)

Последние комментарии