/ Адаптивность / 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: 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)

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

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

Карта на сайт

Для добавления интерактивной карты в раздел контакты, нужно поместить в страницу или шаблон сгенерированный код Yandex карты, Google Map, или 2GIS. На данной странице я собрал популярные решения по добавлению Читать далее »

Посты — метки на карте

Посты — метки на карте

Пытаясь реализовать удобный функционал по созданию меток на интерактивной карте я пришел к следующей системе. Заводим произвольный тип записи и таксономии чтобы структурировать и удобно манипулировать городами и точками. Основа Читать далее »

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

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

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

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

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

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