Оформление карты яндекс в примерах

Дата публикации: 02 Дек 2016г.

Как оформить метки на карте яндекс своими картинками? Как разместить ссылку внутри балуна? Рассмотрим все это в описании ниже.

В примере указано как оформлять метки (флаги) своими картинками. Как добавить свои комментарии и ссылки в 'балун'. Итак, поехали:
В head вставляем скрипт

<script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {
//Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
var myMap = new ymaps.Map("map", {
center: [54.83, 37.11],
zoom: 5
}),
myPlacemark = new ymaps.Placemark([55.907228, 31.260503], {
// Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства.
balloonContentHeader: "Балун метки",
balloonContentBody: "Содержимое <em>балуна</em> метки <a href='http://ya.ru'>ya</a>",
balloonContentFooter: "Подвал",
hintContent: "Хинт метки"
});
myPlacemark2 = new ymaps.Placemark([55.76, 37.56], {
// Свойства.
// iconContent: 'Комментарий к метке',
balloonContentHeader: "Балун метки",
balloonContentBody: "Содержимое <em>балуна</em> метки",
balloonContentFooter: "Подвал",
hintContent: "Хинт метки"
}, {
// Опции.
// Своё изображение иконки метки.
iconImageHref: 'fileadmin/img/pea_flag.png',
// Размеры метки.
iconImageSize: [42, 64],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-3, -42]
});

myMap.geoObjects.add(myPlacemark);
myMap.geoObjects.add(myPlacemark2)

myMap.controls
// Кнопка изменения масштаба.
.add('zoomControl', { left: 5, top: 5 })
// Список типов карты
.add('typeSelector')
// Стандартный набор кнопок
.add('mapTools', { left: 35, top: 5 });
}
</script>

В месте где нужно вывести карту вставляем

<div id="map" style="width:600px; height:300px"></div>

Более подробно тут Api yandex карт