Reply To: ACF_FORM Google Maps Field in Bootstrap Collapse / Accordion

• Dorn Studio

• December 5, 2016 at 12:55 am

Also,

I’ve read the documentation for Solving the hidden map issue.

This appears to be a solution for rendering a field where the ‘map’ variable is known. However, my issue was that with an acf_form I did’t know what the variable for the map was. So, I went into the code a bit and found: acf.fields.google_map (~ line 5155 in acf-input.js). From there, I worked backwards a bit and came up with:

$(document).ready(function(){ 
	$('.panel').on('shown.bs.collapse', function () {

		var this_panel = $(this);
		
		if($(this).find('.acf-google-map').length > 0){
			var acf_map = acf.fields.google_map.map;	
			var currCenter = acf_map.getCenter();
			google.maps.event.trigger(acf_map, 'resize');
			acf_map.setCenter(currCenter);
		}
	});
});

This seems to be working for me and hopefully it can help/work for someone else.