Допустим есть список координат
<ul>
<li><a href="#" data-item="0" data-map="47.231835,39.758484" class="coll"><div>ул. 16-я Линия, 16/15</div></a></li>
<li><a href="#" data-item="1" data-map="47.282849,39.715381" class="coll"><div>ул. Волкова, 12/11</div></a></li>
<li><a href="#" data-item="2" data-map="47.253591,39.764474" class="coll"><div>пр-кт Сельмаш, 7А</div></a></li>
<li><a href="#" data-item="3" data-map="47.207573,39.631399" class="coll"><div>пр-кт Коммунистический, 27</div></a></li>
<li><a href="#" data-item="4" data-map="47.229954,39.759603" class="coll"><div>ул. Советская,12/1</div></a></li>
<li><a href="#" data-item="5" data-map="47.218064,39.70817" class="coll"><div>пр-кт Буденновский, 17</div></a></li>
<li><a href="#" data-item="6" data-map="47.222164,39.715925" class="coll"><div>ул. Б. Садовая 57</div></a></li>
<li> <a href="#" data-item="7" data-map="47.207573,39.631399" class="coll"><div>Малиновского ул., 25</div></a></li>
</ul>
Нам нужно по клику перевести центр карты на выбранную точку и показать балун.
Подключаем API
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
var myMap;
function init () {
var myMap = new ymaps.Map("mapshops", {
center: [latin],
zoom: 12,
controls: ['zoomControl','fullscreenControl']
//,type: "yandex#satellite" // загрузка спутник
});
var myPlacemark=[]
<?
//имеем массив с координатами foreach($GLOBALS['MAPERS'] as $i=>$latin)
{
?>
myMap.geoObjects.add(myPlacemark[<?php echo $i?>] = new ymaps.Placemark([<?=$latin?>], {
// Свойства.
balloonContent: 'тут контент'
},{
balloonPanelMaxMapArea: 0,
iconLayout: 'default#image',
iconImageHref: "/upload/pipka.png",
iconImageSize: [42,39],
iconImageOffset: [-16, -39],
openEmptyBalloon: true
}));
<?} ?>
myMap.behaviors.disable("scrollZoom"); //Вешаем событие на клик
$('a.coll').on('click',function(e){
e.preventDefault();
$('a.coll').removeClass('open')
//считываем координаты и меняем местами
cald=$(this).data('map').split(",")
mars=cald[1]+','+cald[0]
//получаем номер массива
$id=$(this).data('item')
$(this).addClass('open')
//отрисовываем и показываем с перемещением и открываем балун
myMap.panTo(myPlacemark[$id].geometry.getBounds()[0], 15, {
checkZoomRange: false
}).then(function(){myPlacemark[$id].balloon.open();});
return false;
})
}
</script>