Как кастомизировать Яндекс карту на сайте с помощью api



Как кастомизировать Яндекс карту на сайте с помощью api

Для тех, кого не устраивает функционал стандартного виджета Яндекс карт, либо наоборот, хотите убрать кучу ненужных кнопок с карты, и сделать это без плагинов на api карт Яндекса - то я дам готовый шаблон кода, который удачно можно вставлять на любом сайте и настраивать все под себя, как душе угодно.

Итак, приступим.

Подключаем скрипт api карт

В хедере, где-нибудь в head вставляем следующий код

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

Создаем контейнер карты

В любом месте сайта, где мы хотим увидеть нашу карту, вставляем вот это:


<div id="map"></div>

Скрипт сам обнаружит его, и в нем отрисует карту. Не забудьте для данного блока описать css стили, у меня, например, часто используются такие: width:100%;height:450px;margin:0;

Вставляем скрипт карты с нашими настройками

В теле сайта, либо в футере, необходимо вписать вот этот код, либо выносим его в отдельный файл и подключаем отдельно:

<script type="text/javascript">
ymaps.ready(function () {
 
 var myMap = new ymaps.Map('map', {
 center: [59.930150, 30.374750],
 zoom: 17,
 behaviors: ['default', 'scrollZoom'],
 controls: ['zoomControl']
 }, {
 searchControlProvider: 'yandex#search'
 }),
 
 myPlacemark = new ymaps.Placemark([59.930150, 30.374750], 
 
 {balloonContentBody: "<div class='ballon-point'><div class='ballon-img'><img src='/wp-content/themes/mytheme/img/logo.png'/></div><div class='ballon-content'>Какой-нибудь текст, который откроется при клике на метку карты</div></div>"},

 {
 iconLayout: 'default#image',
 iconImageHref: '/wp-content/themes/bbs-theme/img/map-marker.png',
 iconImageSize: [66, 90],
 iconImageOffset: [-33, -90]
 });
 
 myMap.geoObjects.add(myPlacemark);
 myMap.behaviors.disable('scrollZoom');
 
});
</script>

Теперь разберем подробно, какие части кода за что отвечают.

center: [59.930150, 30.374750], - Координаты центральной точки карты (не маркера местоположения, а именно самой карты). Координаты любой точки удобно смотреть в гугл картах, кликаем правой кнопкой мыши на нужном месте и выбираем пункт "Что здесь?" после этого мы увидим координаты места.

zoom: 17, - масштаб отдаления карты.

behaviors: ['default', 'scrollZoom'], и myMap.behaviors.disable('scrollZoom');  - отключаем изменения масштаба карты колесиком мыши (я всегда отключаю, так как если карта очень большая, то посетитель сайта не сможешь пролистать вниз сайт, потому что скрипт карты будет перехватывать скролл мыши и изменять масштаб.

Для изменения масштаба на карте мы оставим кнопки - controls: ['zoomControl']

controls: - тут мы перечисляем все кнопки, необходимые для показа на карте, подробно узнать о том какие кнопки можно включить, можно здесь https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls-docpage/ .

myPlacemark = new ymaps.Placemark([59.930150, 30.374750], - Добавляем свою метку на карту, указываем координаты заведения.

{balloonContentBody: ........ - Настраиваем блок, который показывается при клике на маркер местоположения организации. Можно туда любую картинку вставить, любой сложности верстку осуществить, у меня все простенько, логотип и текст. Не забудьте изменить ссылку картинки на ту, где у вас хранится нужная картинка.

iconImageHref: '/wp-content/themes/bbs-theme/img/map-marker.png', - Указываем ссылку на изображение, которое будет являться картинкой маркера местоположения организации. Ее размеры мы задаем вот здесь iconImageSize: [66, 90], а iconImageOffset: [-33, -90] отвечает за позиционирование данной метки, у меня стоят цифры моих меток, чтобы все сходилось в нужном месте. Если размеры маркера у меня заданы как iconImageSize: [66, 90], то саму картинку лучше именно в таком разрешении и делать, чтобы не произошло никаких странностей, картинку конечно же, в формате png.

Ну, вроде бы все, основные моменты описал, все настройки можно посмотреть в справочнике api Яндекс карт.

 


Также рекомендую к ознакомлению


avatar
  Подписаться  
Уведомление о
Последние комментарии