How to insert google route normally?

Question

Google

There is a route. I'm trying to insert it through an iframe on the site.
I open the site, everything is fine. Refreshing the page is done like this
. I have several cards (from 1 to N).
I tried to attach kml routes to the map through gmaps.js, but the problem is this: the blocks with the map unfold, display: none by default. The first block when turning the first card is normally visible, the second is not normal
Code

var map, infoWindow;
    
    $('.splav_block-item--right--more').on('click', function (e) {
        
    
        
        var element_id = $(this).data("dataid");
        
        if($('#mapway_'+element_id).length) {
            
        var kml_id = $('#mapway_'+element_id).data("kml");
        
                  infoWindow = new google.maps.InfoWindow({});

                   map = new GMaps({
                        el: '#mapway_'+element_id,
                        width: '100%',
                        height: 500,
                        lat: 55.178476,
                        lng: 58.696808,
                        mapType: 'satellite',
                        scrollwheel: false,
                        zoom: 13
                    });
                    
                    map.loadFromKML({
                    url: 'http://www.google.com/maps/d/kml?mid='+kml_id,
                    suppressInfoWindows: true,
                    events: {
                      click: function(point){
                        infoWindow.setContent(point.featureData.infoWindowHtml);
                        infoWindow.setPosition(point.latLng);
                        infoWindow.open(map.map);
                      }
                    }
                  });
                  
              }
        console.log(element_id);
        $(".detail_text_"+element_id).slideToggle();
        $(this).hide();
        e.preventDefault();

    });

Perhaps there is a jamb in the map variable, you can’t hang the second map there, tell me at the same time how to create a variable like "map_" + element_id from the string

Answer 1

$('.splav_block-item--right--more').on('click', function (e) {
        
    
        
        var element_id = $(this).data("dataid");
        
        $(".detail_text_"+element_id).slideToggle();
        $(this).hide();
        
        
        var e_id =element_id;
        
        if($('#mapway_'+e_id).length) {
            
        var kml_id = $('#mapway_'+e_id).data("kml");
        
                  infoWindow[e_id] = new google.maps.InfoWindow({});

                   map[e_id] = new GMaps({
                        el: '#mapway_'+e_id,
                        lat: 55.184062,
                        lng: 58.68396,
                        mapType: 'hybrid',
                        scrollwheel: false,
                        zoom: 14
                    });
                    
                    
                    map[e_id].loadFromKML({
                    url: 'http://www.google.com/maps/d/kml?mid='+kml_id,
                    suppressInfoWindows: true,
                    events: {
                      click: function(point){
                        infoWindow[e_id].setContent(point.featureData.infoWindowHtml);
                        infoWindow[e_id].setPosition(point.latLng);
                        infoWindow[e_id].open(map[e_id].map);
                      }
                    }
                  });
                  
              }
        
        
        //отключим скролл к верху документа
        e.preventDefault();

    });