Morning, I have tried to load 3 individual maps inside 3 tabs on the same page. First one loads, but the rest does only shows the Google Maps frame with no data and or map info. I also checked loading the outside the Tabs, but still has a issue. Please can you assist.

TEST

Thanks

Public
Hello,
Can you send me your page URL where the map is located so I can check it at your end?

Thanks
#1
Public
Sorry thought I had provided the correct URL:

https://cc.wp.cinnabar.co.za/test/
#2
Public
Hello,
Yeah, this link is working correctly, and I found this is a resize issue. when you resize your window you will find your map in working condition.
We have created an article related to that issue please check this link https://www.linkedin.com/pulse/make-google-maps-work-inside-tabs-modals-wordpress-sandeep-kumar

Here we mention all needed steps for map resize. I hope it help you.
Thanks
#3
Public
Thank you. So where exactly in this ocde would i replace the 2 map id's i have on the tabs:

add_action( 'wp_head','flippercode_maps_fix' );

function flippercode_maps_fix() {
?>

jQuery(document).ready(function($){
$('body').on('click','.responsive-tabs__list__item',function(){
var id = $(this).attr('id');
if( id == 'tablist1-tab2') {
if(typeof map1 != 'undefined') {
$(map1).data('wpgmp_maps').resize_map();
}
}
});
});

<?php }
#4
Public
Hello,
You need to replace the map id at $(map1).data('wpgmp_maps').resize_map();. Here "map1" is the map id and executing with [put_wpgm id=1] shortcode. Here you can insert map id according as needed.

If you want to resize 2 maps then 2 condition will be inserted and so on. i have inserted code with condition for your help.

add_action( 'wp_head','flippercode_maps_fix' );

function flippercode_maps_fix() {
?>

jQuery(document).ready(function($){
$('body').on('click','.responsive-tabs__list__item',function(){
var id = $(this).attr('id');
if( id == 'tablist1-tab2') {
if(typeof map1 != 'undefined') {
$(map1).data('wpgmp_maps').resize_map();
}
}

if( id == 'tablist1-tab3') {
if(typeof map1 != 'undefined') {
$(map2).data('wpgmp_maps').resize_map();
}
}
});
});

<?php }
#5
Public
Still no joy. I have implemented the code in my child theme's function.php file, but it has not made any difference.
#6
Public
Hello,
I checked your URL where the map is located, In View Source I am not getting any resize code is inserted there, Please insert this code in your main activated theme functions.php and let me know.

Thanks
#7
Public
Please check the attached file as I tried it in the original theme functions.php file and still doesn't work.
#8
Public
Hello,
There is no attach file with your support ticket. You can send me at support@flippercode.com.
Thanks
#9

Please login or Register to Submit Answer