How to make the map show this place when you click on the desired address?

Question

JavaScript

It is necessary to implement something similar to how on this site angelovo.academy, click on the "addresses" menu item.
By clicking on the table with addresses, the Yandex map changes its content and shows the address you need.
How to do it?

Answer 1

Info in the dock: https://tech.yandex.ru/maps/doc/jsapi/2.0/ref/ref...
Example from the docks:

// Полёт из Калининграда во Владивосток через Москву
map.setCenter([54.704815, 20.466380], 10);
map.panTo([
    [ 55.751574, 37.573856 ],
    [ 43.134091, 131.928478 ]
], {
    callback: function () {
        alert('Прилетели!');
    }
});

A piece of code from your example site:

document.querySelector('#showMap_1').addEventListener('click', function() {
    myMap.setZoom( 15 );
    myMap.panTo([55.66837606904998,37.484163499999944],{flying:1});
});

Answer 2

Strictly speaking, the principle of "do not repeat yourself" is violated.
on the site example for each individual selector the same code, only the number of coordinates change.
it goes without saying that these correspondences should be placed in a separate js-object of the form

var coords = {
  'showMap_1':{
    [55.66837606904998,37.484163499999944]
  },
  'showMap_2':{
    [55.66266356906509,37.478000999999914]
  },
  ...
}

what's interesting is that jikveri is included in the page but the script uses vanilla selectors.
in general, instead of 10 handlers on each element - you need one like this

$('tr[id=^showMap]').click(function() {
    myMap.setZoom( 15 );
    myMap.panTo(coords[$(this).attr('id')],{flying:1});
    TweenMax.to(window, 0.5, {scrollTo:{y: document.getElementById("map").offsetTop-10}})
});

when clicked, the identifier of the table row is taken, it immediately obtains a match from coords by key.
of course, coords must be in the scope next to the function, or in some kind of global object (if the list of coordinates is dynamic every time and is written in the page code on the server)