API Яндекс.Карт

Если нам нужно кастомизировать карту Яндекс, то будет не достаточно подключить ее через iframe, т.к. в нем не будет никаких настроек. Необходимо подключить API Яндекс.Карт

Подключаем API Яндекс.Карт

На данный момент существуют разные версии Api. Будем подключать версию 2.1

wp_enqueue_script( 'yandex-maps', 'https://api-maps.yandex.ru/2.1/?lang=ru_RU' , array( ), '2.0', true );

Создаем контейнер в котором будет создаваться карта

<div id="YMapsID" style="width: 100%; height: 400px;"></div>

Конструируем карту

Привожу типовой вариант карты Яндекс

ymaps.ready(function () {
    var myMap = new ymaps.Map('YMapsID', {
        center: [43.567075, 39.736186],
        zoom: 14,
		controls: ['smallMapDefaultSet']
    });
	
    myMap.geoObjects
        .add(new ymaps.Placemark([43.567075, 39.736186], {
            balloonContent: '', //Всплывающий при наведении текст
            iconCaption: 'Черноморская, 13 Г'
        }, {
            preset: 'islands#redCircleDotIconWithCaption',
            iconCaptionMaxWidth: '200'
   }));
	
	myMap.behaviors.disable('scrollZoom'); //Отключам zoom колесом при наведении
});

Координаты объекта проще всего выяснять, открыв Яндекс карты и введя необходимый адрес. Чуть ниже введенного адреса ебудут сами координаты и кнопка Скопировать.

Больше настроек и параметров можно узнать на специальном сайте API Яндекс.Карт

Собственная иконка на карте

Добавляем в скрипт следующий код:

// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
     '<div style="color: #FFFFFF; font-weight: 600;">$[properties.iconContent]</div>'
),

myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
     hintContent: 'Таганрогская, 140 Б, офис 16',
     balloonContent: 'НАЗВАНИЕ<br>Таганрогская, 140 Б, офис 1<br>+7 (863) 288-88-88 доб. 118<br>+7 (888) 888-88-89'
}, {

     // Необходимо указать данный тип макета.
     iconLayout: 'default#image',
     iconImageHref: '/wp-content/uploads/2018/07/bazabirs-map.png',
     // Размеры метки.
     iconImageSize: [52, 83],
     // Смещение левого верхнего угла иконки относительно её точки привязки.
     iconImageOffset: [-26, -83]
})
		
myMap.geoObjects
.add(myPlacemark)

Сделать карту черно белой

[class*="ymaps-"][class*="-ground-pane"] {filter: grayscale(100);}

При этом нанесенные иконки не будут серыми.

[site-socialshare]