<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="http://api-maps.yandex.ru/2.1/?load=package.standard&lang=ru-RU" type="text/javascript"></script> <div id="map" style="width:400px; height:300px"></div> <a href="#" class="goto" data-map="Москва">Москва</a><br> <a href="#" class="goto" data-map="Киев">Киев</a><br> <a href="#" class="goto" data-map="Екатеринбург">Екатеринбург</a><br> <a href="#" class="goto" data-map="Одесса">Одесса</a> <script> ymaps.ready(init); function init() { var myMap = new ymaps.Map('map', { center: [55.753994, 37.622093], zoom: 10, controls: [] }); destinations = { 'Москва': [55.753559, 37.609218], 'Санкт-Петербург': [59.938531, 30.313497], 'Екатеринбург': [56.829748, 60.617435], 'Одесса': [46.466444, 30.7058] }, $('.goto').on('click', function(e){ e.preventDefault(); var pos = $(this).data('map'); console.log(pos); // переходим по координатам myMap.panTo(destinations[pos], { flying: 1 }); }); var myPlacemark = new ymaps.Placemark(destinations['Москва'], { }, { iconLayout: 'default#image', iconImageHref: 'map-icon.png', iconImageSize: [79, 96], iconImageOffset: [0, -50], }); myMap.geoObjects .add(myPlacemark); } </script>
Есть карта и ссылки с data атрибутами, внутри которых записаны адреса. По клику на ссылку должен происходит переход (не обязательно плавный) или новая загрузка карты с этим самым адресом вн. дата атрибута данной ссылки.
destinations не подходит для данной цели, потому как редактирование адресов не через скрипт будет происходит, а с помощью задания этих самых адресов внутри data-map.
Вопрос: как можно поправить скрипт, чтобы формировалась карта с меткой (и маркером к ней) + по клику на ссылку происходил переход к адресу ссылки, с центрированием и отображением маркера у данного адреса?