The task is to cover a large number of cards on one page, which one is unknown, but there may be a lot of them. You need to initialize it on click, as the cards are in tabs, and, respectively, when switching to another tab, hide the previous one and show a new one, that is, initialize a new card, and remove the old one.

As I understand it, the Yandex API allows you to call it only by id, so I need to somehow pass this id to the parameter. Ideally, the container needs to transfer the coordinates via data-attr.

What came to myself at the moment:

$(document).ready(function(){ $('.carousel-flights-item').click(function(){ showMap(); initYaMap (); return false; }); }); function initYaMap () { ymaps.ready(init); var myMap; function init(){ myMap = new ymaps.Map ("map", { center: [53.35, 83.73], zoom: 4 }); } } <div class="tracking-map"> <div class="tracking-map__yandex-map" id="map" style="width: 100%; height: 100%"></div> </div>

PS If you need additional information or working code, write lay on codepen.

  • meaning to ask what you know the answer? - Jean-Claude
  • @ Jean-Claude apparently that others who will search, and immediately find the answer. This is how I asked a question, and answered it after a while :) - Vasily Barbashev
  • @ Vasily Barbashev has a problem at the moment, when switching tabs, the previous card does not disappear ( - Jarvis

0