/ Адаптивность / API Яндекс.Карт

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

HIT

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

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Записи-метки на картах

Записи-метки на картах

Сделаем функционал привязки записи (любого типа) к картам Google или Yandex. Это может быть востребовано для контактов дилерских центров, филиалов и т.п. Это статья является как бы вступительной теоретической. Более Читать далее »

Изменить стиль карты Google Map

Изменить стиль карты Google Map

Изменяем стили оформления карты Google Map. Также можно настроить отображение маркера, скрыть либо добавить объекты на карту. Подключение скрипта Google Maps API Подключаем скрипт добавляющий функционал добавления и редактирования карт Читать далее »

Множественные точки на Google Map

Множественные точки на Google Map

Добавим на карту Google множество точек с описаниями.

Добавить комментарий

Пока нет комментариев. Будь первым!

API Яндекс.Карт
Подарок за покупку
Рекомендации для васПодарок за покупкуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.