Last active
November 28, 2019 07:31
-
-
Save ArtemSites/7d5e97ea3d94fb3b6d7c4267e72fce6c to your computer and use it in GitHub Desktop.
Добавление своих меток в yandex карту.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="section-map map"> | |
<div class="map-open js-map-open-xs"> | |
<p>Для открытия карты, кликните на нее</p> | |
</div> | |
<div id="map"></div> | |
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script> | |
<script> | |
ymaps.ready(function() { | |
var myMapBallon = { | |
iconLayout: 'default#image', | |
iconImageHref: '/pointer.svg', | |
iconImageSize: [38, 48], | |
iconImageOffset: [-19, -24] | |
}; | |
var myMap = new ymaps.Map('map', { | |
center: [53.233530, 50.243781], | |
zoom: 13 | |
}, { | |
searchControlProvider: 'yandex#search' | |
}), | |
myPlacemark = new ymaps.Placemark([51.194990242949352, 52.28401851617851], { | |
hintContent: '<b>Производство</b> <br>Адрес 1', | |
balloonContent: '<b>Производство</b> <br>Адрес 1' | |
}, myMapBallon) | |
myPlacemarkShowRoom = new ymaps.Placemark([51.214283, 52.184701], { | |
hintContent: '<b></b>Шоу-рум</b> <br>Адрес 2', | |
balloonContent: '<b>Шоу-рум</b> <br>Адрес 2' | |
}, myMapBallon) | |
myMap.geoObjects.add(myPlacemark); | |
myMap.geoObjects.add(myPlacemarkShowRoom); | |
myMap.behaviors.disable('scrollZoom'); | |
$('.js-map-open-xs').on('click', function() { | |
$(this).remove(); | |
}); | |
}); | |
</script> | |
</div><!-- /.section-map map --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Функция ymaps.ready() будет вызвана, когда | |
// загрузятся все компоненты API, а также когда будет готово DOM-дерево. | |
ymaps.ready(init); | |
function init() { | |
//[53.2006242, 50.1667614] | |
// Создание экземпляра карты и его привязка к контейнеру с | |
// заданным id ("map") | |
var myMap = new ymaps.Map('map-filter', { | |
// При инициализации карты, обязательно нужно указать | |
// ее центр и коэффициент масштабирования | |
center: [53.2006242, 50.1667614], // Нижний Новгород | |
zoom: 16 | |
}); | |
//Добавляем элементы управления | |
myMap.controls | |
// Кнопка изменения масштаба | |
.add('zoomControl') | |
// Список типов карты | |
.add('typeSelector') | |
//Линейка масштаба | |
.add(new ymaps.control.ScaleLine()) | |
// Создание метки | |
var myPlacemark = new ymaps.Placemark( | |
// Координаты метки | |
[53.2006242, 50.1667614], { | |
// Свойства | |
// Текст метки | |
// balloonContentBody: '<a href="#" target="_blank" rel="nofollow">Перейти на сайт</a>', | |
hintContent: 'Магазин цветов' | |
}, { | |
// draggable: true, // Метку можно перетаскивать, зажав левую кнопку мыши. | |
iconImageHref: '../img/map-point.png', // картинка иконки | |
iconImageSize: [50, 60], // размеры картинки | |
iconImageOffset: [0, 0], // смещение картинки | |
}); | |
// Добавление метки на карту | |
myMap.geoObjects.add(myPlacemark); | |
myMap.geoObjects.add(myMap); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment