Если нам нужно кастомизировать карту Яндекс, то будет не достаточно подключить ее через 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: bold;">$[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)
