ACF_FORM Google Maps Field in Bootstrap Collapse / Accordion

• Dorn Studio

• December 2, 2016 at 9:17 pm

Hi everyone,

I’m using a front acf_form that uses a Google Maps field. This works just fine, but I’m having an issue in rendering the calendar within a Bootstrap accordion (collapse).

Essentially, after expanding the collapsed area, the map looks ‘grayed-out’ …it’s draggable and shows the marker, but there are no other UI Controls (i.e there is no intelligable map, it’s just a draggable gray box). The field renders just fine when it’s not in a collapsed item.

Anyways, I’ve tried literally every solution I could find/think of under the sun and I still can’t get the map to render OK. The below is what I have and thought would work based on my understanding of the Google Maps code, but it doesn’t work:

$('.panel').on('shown.bs.collapse', function (event) {
	var map = $(this).find('.acf-google-map .canvas');
	google.maps.event.trigger(map, 'resize');
});

Maybe I’m missing / can’t find the correct callback function?

Does anyone have any insights on how to resolve this? If so, please let me know.

Thanks in advance!

• 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.