Знаний в области написания мало, но очень хочеться сделать свою карту со следующими требованиями:
- на API 2.1 (хоть и бета, очень редизайн удалс Яндексу)
- метки (порядка 150-200) имеют свое изображение и при нажатии на нее, меняет цвет (вставляет другой *.png файл) и центрирует их на карте
- балун открывается внизу страницы с кнопкой закрыть (см. картинку)
- в теле балуна несколько строк + ссылка.
Из всего этого получаеться только добавлять "свою" метку на карту и делать многострочный балун, а вот как привязать его к низу странцы???
И как граммотней добавлять метки, массивом? или по одной?
Ниже примитивный, но, рабочий код, который я собрал в песочнице.
Никак не пойму куда вставлять переменные "options.panelMaxMapArea" для изменения типа балуна?
и как сделать замену иконки и кластеризацию? Надеюсь гуру API помогут чайнику
<script src="//api-maps.yandex.ru
<style type="text/css">
#map {
width: 580px;
height: 450px;
}
</style>
<script type="text/javascript">
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.751574, 37.573856],
zoom: 9,
controls: ['zoomControl', 'searchControl', 'typeSelector', 'rulerControl', 'fullscreenControl']
});
// Создаем метку с помощью вспомогательного класса.
myPlacemark = new ymaps.Placemark([55.67837,37.709045], {
// Свойства.
hintContent: 'Хрень'
}, {
// Опции.
// Своё изображение иконки метки.
iconLayout: 'default#image',
iconImageHref: 'http://aps-shop.ru/UserFi
// Размеры метки.
iconImageSize: [22, 31],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-11, -31]
}),
// Создаем метку с помощью вспомогательного класса.
myPlacemark1 = new ymaps.Placemark([55.935137,37.772045], {
// Свойства.
hintContent: 'Хрень1'
}, {
// Опции.
// Своё изображение иконки метки.
iconLayout: 'default#image',
iconImageHref: 'http://aps-shop.ru/UserFi
// Размеры метки.
iconImageSize: [22, 31],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-11, -31]
}),
myPlacemark2 = new ymaps.Placemark([55.863768,37.642269], {
// Свойства.
hintContent: 'Хрень2'
}, {
// Опции.
// Своё изображение иконки метки.
iconLayout: 'default#image',
iconImageHref: 'http://aps-shop.ru/UserFi
// Размеры метки.
iconImageSize: [22, 31],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-11, -31]
});
// Добавляем все метки на карту.
myMap.geoObjects
.add(myPlacemark1)
.add(myPlacemark2)
.add(myPlacemark);
});
</script>
<body>
<div class="hero-unit">
<div class="container">
<div id="map"></div>
</div>
</div>
</body>