Обязательная разметка
Вам потребуется в обязательном порядке весь код Яндекс карты разместить в диве с id=map. Так же не забывайте указать размеры этого дива, иначе карта может не отобразится.
<div id='map' style='width:100%;height: 400px;'></div>Подключение к API Яндекс карт
Второй шаг - это подключение к API Яндекс карт. Очень важный момент - на других ресурсах отправляют получать API ключ, делать этого не нужно, достаточно просто подключить скрипт так, как указано ниже.
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>Выводим Яндекс карту со своим логотипом
<script>
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
// Координаты центра карты
center:[55.72418355036728,37.50472259430868],
// Масштаб карты
zoom: 16,
// Выключаем все управление картой
controls: []
});
var myGeoObjects = [];
// Указываем координаты метки
myGeoObjects = new ymaps.Placemark([55.72418355036728,37.50472259430868],{
balloonContentBody: 'БЦ 'Минская Плаза'',
},{
iconLayout: 'default#image',
// Путь до нашей картинки
iconImageHref: '/assets/adress.png',
// Размеры иконки
iconImageSize: [70, 70],
// Смещение верхнего угла относительно основания иконки
iconImageOffset: [-35, -35]
});
var clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: false,
clusterOpenBalloonOnClick: false,
});
clusterer.add(myGeoObjects);
myMap.geoObjects.add(clusterer);
// Отключим zoom
myMap.behaviors.disable('scrollZoom');
}
</script>
Что должно получится в итоге
Итоговый код Вы можете использовать сразу у себя в проекте, не забудьте подставить свои координаты и путь к своей иконке. Координаты можно рассчитать в конструкторе Яндекс карт
<div id="map" style="width: 100%; height: 400px">
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script>
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
// Координаты центра карты
center:[55.72418355036728,37.50472259430868],
// Масштаб карты
zoom: 16,
// Выключаем все управление картой
controls: []
});
var myGeoObjects = [];
// Указываем координаты метки
myGeoObjects = new ymaps.Placemark([55.72418355036728,37.50472259430868],{
balloonContentBody: 'БЦ 'Минская Плаза'',
},{
iconLayout: 'default#image',
// Путь до нашей картинки
iconImageHref: '/assets/adress.png',
// Размеры иконки
iconImageSize: [70, 70],
// Смещение верхнего угла относительно основания иконки
iconImageOffset: [-35, -35]
});
var clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: false,
clusterOpenBalloonOnClick: false,
});
clusterer.add(myGeoObjects);
myMap.geoObjects.add(clusterer);
// Отключим zoom
myMap.behaviors.disable('scrollZoom');
}
</script>
</div>