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