Настройка Яндекс карты, открытие балуна метки

Допустим есть список координат

<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>


Комментарии к статье
Защита от роботов