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;
});
});
});
CSS
