<script src="//api-maps.yandex.ru/2.1/?load=package.standard&lang=ru-RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(function () { var myMap = new ymaps.Map('objects_map', { center: [55.62437, 37.714321], zoom: 9, behaviors: ['default', 'scrollZoom'] }), myGeoObjects = []; myGeoObjects[0] = new ymaps.Placemark([55.123456, 37.123456], { name: 'name1', balloonContent: 'название маркера 1' }, { iconLayout: 'default#image', iconImageHref: '/images/marker.png', iconImageSize: [32, 32] }); myGeoObjects[1] = new ymaps.Placemark([55.654321, 37.654321], { name: 'name2', balloonContent: 'название маркера 2' }, { iconLayout: 'default#image', iconImageHref: '/images/marker.png', iconImageSize: [32, 32] }); var customItemContentLayout = ymaps.templateLayoutFactory.createClass( '{{ properties.balloonContent|raw }}' ); var myClusterer = new ymaps.Clusterer({ clusterDisableClickZoom: false, clusterOpenBalloonOnClick: true, clusterHideIconOnBalloonOpen: false, clusterBalloonContentLayout: 'cluster#balloonCarousel', clusterBalloonItemContentLayout: customItemContentLayout, clusterBalloonPanelMaxMapArea: 0, clusterBalloonContentLayoutWidth: 250, clusterBalloonContentLayoutHeight: 235, clusterBalloonPagerSize: 5 }); myClusterer.options.set({ gridSize: 50 }); myClusterer.add(myGeoObjects); myMap.geoObjects.add(myClusterer); myMap.setBounds(myClusterer.getBounds(), { checkZoomRange: true }); if (window.location.hash != '') { var hash = window.location.hash.substr(1); if (window.location.hash != '') { var hash = window.location.hash.substr(1); pm = ymaps.geoQuery(myGeoObjects).search('properties.name == "' + hash + '"'); pn = pm.getCenter(myMap); myMap.setCenter(pn); pm.getCentralObject(myMap).balloon.open(); } } ids = { '0': [55.987654, 37.987654], '1': [55.654321, 37.654321] }; function to_marker() { var id = this.getAttribute("data-rel"); myMap.panTo(ids[id]).then(function () { myMap.setZoom(17, {smooth: true}); myGeoObjects[id].balloon.open(); }); return false; } var a = document.getElementsByClassName('to_marker'); for (var i = 0, n = a.length; i < n; ++i) { a[i].onclick = to_marker; } }); </script> <div id="map"> <div class="left"> <ul> <li> <a class="to_marker" data-rel="0">адрес 1</a> </li> <li> <h3 class="to_marker" data-rel="1">адрес 2</h3> </li> </ul> </div> <div class="right"> <div id="objects_map"></div> </div> </div>