Google My Maps not center when I click on the other navtabs:

I'm creating a store locator to my Shopify page using Google My Map but the problem is when I clicked on the 2nd tab my map is not centered. But the first one looks fine.

Not sure what I need to tweak on my code, if someone can guide that would be great

here's my sample below:

tab 1 NCR OKAY

tab2 Central 1 NOT Centered

and here's my code below:

 <ul class="tabs clearfix">

 <li><a href="#tab-1" class="active">
 <span class='icon' style="font-size:18px" >{% render 'icon-theme-088' %}NCR</a></li></span>

 <li><a href="#tab-2">
 <span class='icon' style="font-size:18px" >{% render 'icon-theme-088' %}CENTRAL 1</a></li></span>

 <li><a href="#tab-3">
 <span class='icon' style="font-size:18px" >{% render 'icon-theme-088' %}CENTRAL 2</a></li></span>

 <li><a href="#tab-4">
 <span class='icon' style="font-size:18px" >{% render 'icon-theme-088' %}CENTRAL 3</a></li></span>

 </ul>

 <div class="cgt-content">

 <div id="tab-1" class="row active">
  {%- if section.settings.show_info_column or section.settings.contact_map_code != blank -%}
  <div class="col-12 col-md-8 mb-30" >
    <iframe src="https://www.google.com/maps/d/embed?mid=1ddwP5dRgl4WT_y_woVCOhi8-VBP1XAQ&ehbc=2E312F" width="100%" height="680"></iframe>
  </div>
  {%- endif -%}
  
  {%- if section.settings.desc != blank -%}
  <div class="col-12 col-md-3 mx-auto ScrollStyle">
    {% include 'parse-page-html-content' with default_page: faqs_default_page page_content: block.settings.page_content html: section.settings.desc %}
  {%- endif -%}
  </div>
 </div>

 <div id="tab-2" class="row">
 {%- if section.settings.show_info_column or section.settings.contact_map_code != blank -%}
  <div class="col-12 col-md-8 mb-30" >
 <iframe src="https://www.google.com/maps/d/embed?mid=1_yUsPX0W_G-rBH6aVSuFUq7z5PDNK_s&ehbc=2E312F" width="100%" height="680"></iframe>
  </div>
  {%- endif -%}
  
   {%- if section.settings.desc != blank -%}
  <div class="col-12 col-md-3 mx-auto ScrollStyle">
   {% include 'parse-page-html-content' with default_page: faqs_default_page page_content: block.settings.page_content html: section.settings.desc2 %}
  {%- endif -%}
  </div>
</div>

 <div id="tab-3" class="row">

 Enter Shipping & Returns details over here.

 </div>

 <div id="tab-4" class="row">

 Enter youtube video , vimeo ,etc embed code.

 </div>

 </div>
 </div>

JS.CODE

   $(document).ready(function() {

 $('ul.tabs').each(function(){

 var active, content, links = $(this).find('a');

 active = links.first().addClass('active');

 content = $(active.attr('href'));

 links.not(':first').each(function () {

 $($(this).attr('href')).hide();

 });

 $(this).find('a').click(function(e){

 active.removeClass('active');

 content.hide();

 active = $(this);

 content = $($(this).attr('href'));

 active.addClass('active');

 content.show();

 return false;

 });

 });

 });
</script>

CSS

  margin-top:3px;
  position:relative;
  display:block;
}
#cjl_navtab ul li:before {
    content: none;
}
#cjl_navtab li{
  display:inline-block;
}

#cjl_navtab ul{
  margin:auto;
  width:fit-content;
  padding:unset!important;
}

#cjl_navtab li{
  display:inline-block;
  background:#fff;
  padding:10px;
}

#cjl_navtab li a{
  padding:0;
  font-size:13px;
  text-decoration:none;
  display:table;
  height:50px
  width:100%;
}
#cjl_navtab ul.tabs{
  list-style-type:none;
}

   $(document).ready(function() {

 $('ul.tabs').each(function(){

 var active, content, links = $(this).find('a');

 active = links.first().addClass('active');

 content = $(active.attr('href'));

 links.not(':first').each(function () {

 $($(this).attr('href')).hide();

 });

 $(this).find('a').click(function(e){

 active.removeClass('active');

 content.hide();

 active = $(this);

 content = $($(this).attr('href'));

 active.addClass('active');

 content.show();

 return false;

 });

 });

 });
</script>

/*CJL NAV TAB*/
#cjl_navtab{
  margin-top:3px;
  position:relative;
  display:block;
}
#cjl_navtab ul li:before {
    content: none;
}
#cjl_navtab li{
  display:inline-block;
}

#cjl_navtab ul{
  margin:auto;
  width:fit-content;
  padding:unset!important;
}

#cjl_navtab li{
  display:inline-block;
  background:#fff;
  padding:10px;
}

#cjl_navtab li a{
  padding:0;
  font-size:13px;
  text-decoration:none;
  display:table;
  height:50px
  width:100%;
}
#cjl_navtab ul.tabs{
  list-style-type:none;
}

#cjl_navtab li a .active{
display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs clearfix">

 <li><a href="#tab-1" class="active">
 <span class='icon' style="font-size:18px" >{% render 'icon-theme-088' %}NCR</a></li></span>

 <li><a href="#tab-2">
 <span class='icon' style="font-size:18px" >{% render 'icon-theme-088' %}CENTRAL 1</a></li></span>

 <li><a href="#tab-3">
 <span class='icon' style="font-size:18px" >{% render 'icon-theme-088' %}CENTRAL 2</a></li></span>

 <li><a href="#tab-4">
 <span class='icon' style="font-size:18px" >{% render 'icon-theme-088' %}CENTRAL 3</a></li></span>

 </ul>

 <div class="cgt-content">

 <div id="tab-1" class="row active">
  <div class="col-12 col-md-8 mb-30" >
    <iframe src="https://www.google.com/maps/d/embed?mid=1ddwP5dRgl4WT_y_woVCOhi8-VBP1XAQ&ehbc=2E312F" width="100%" height="680"></iframe>
  </div>
 
   <div class="col-12 col-md-3 mx-auto ScrollStyle">
  
  </div>
 </div>

 <div id="tab-2" class="row">
  <div class="col-12 col-md-8 mb-30" >
 <iframe src="https://www.google.com/maps/d/embed?mid=1_yUsPX0W_G-rBH6aVSuFUq7z5PDNK_s&ehbc=2E312F" width="100%" height="680"></iframe>
  </div>
 
  

  <div class="col-12 col-md-3 mx-auto ScrollStyle">
  
  </div>
</div>

 <div id="tab-3" class="row">

 Enter Shipping & Returns details over here.

 </div>

 <div id="tab-4" class="row">

 Enter youtube video , vimeo ,etc embed code.

 </div>

 </div>