<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.
Вопрос: как можно поправить скрипт, чтобы формировалась карта с меткой (и маркером к ней) + по клику на ссылку происходил переход к адресу ссылки, с центрированием и отображением маркера у данного адреса?
