last day (14 days later) » 

2:37 PM
1
A: Load Same ACF Map Twice on Same Page

TheDrotSince the map starts working after resize... From ACF Website. Solving the hidden map issue The Google map API will not work as expected if initialized on a hidden element. When the element is show, the map will not display. This scenario is most likely when using a popup modal. To solve this...

 
I have posted the code here. I have tried to implement your suggestion, but still when I click on the code it doesn't work.
 
@Ishio Yes it doesn't work because you're not putting it in the correct place. You should put the code in the acf_google-map.js file at the end after $('.acf-map').each(function(). Look at updated answer.
@Ishio The reason it doesn't work anywhere else is because map variable exists only in that file's self executing function. If you try to use anywhere else, it just grabs an HTML element with ID map and that of course doesn't do anything for google map refresh.
 
Ahhhh, let me try that then. Thank you!
Putitng that code in there, I return a render_map is not defined. I should mention I did not build this site, but just making updates to it.
 
@Ishio Did you put the code in correct place? Because looking at the site, I don't see it.
 
I did, but it's on my local repo. Here is my code
 
2:46 PM
I have to afk for few mins but in case you do come here meanwhile.
Look at your custom.js file and comment out this function jQuery('#map-tab').click(function () {
google.maps.event.trigger(map, 'resize');
jQuery('.acf-map').each(function(){
render_map( $(this) );
});

});
 
Made that update. Still no change
 
hi
are you still getting the js error?
or map just doesnt load
 
Map doesn't load. No JS error
Just pushed up the changes to the site
Thank you for your help bte
btw
 
ok that will be helpful
let me see
yeah np glad to help
well the map loads fine for me on live site
 
Yeah, I have the css still in there
As the sites live I had to keep that up
Let me move that CSS out
 
2:58 PM
ok
 
Just moved up CSS
 
yea i see now it doesnt work
ah i see the problem in acf_google-map.js and also why it was spitting out js error before you commented above code
$(document).ready(function(){

$('.acf-map').each(function(){

// create map
map = new_map( $(this) );

});

$('#map-tab').click(function () {
google.maps.event.trigger(map, 'resize');
});

});

})(jQuery);
2nd last line is my typo
remove });
 
Updated, no change
 
can u push it live so i can check through my console
 
Sure did
 
3:06 PM
i still see the same as before
with the extra });
ah ok nvm its fine im sorry
 
No worries
 
ok i tried it with setting delay like this
$('#map-tab').click(function () {
setTimeout(function() {google.maps.event.trigger(map, 'resize')}, 200);
});
bleh
 
No good?
 
with 200ms delay after clicking the tab the map loaded fine
 
Fantasic!
Fantastic!
 
3:12 PM
it probably didnt load without delay because tabs fade in
so theres some animation before it displays
 
That could be it
But it's working just as it needs to! Awesome!
 
great
 
Thank you so much!
 
you're welcome
ill update the answer on site for anyone else that might have this problem
 
I just did that :D
 
3:16 PM
alright, glad it works and happy coding in the future :) see ya
 
Thank you and you as well!
 

last day (14 days later) »