Home Forums ACF PRO ACF_FORM Google Maps Field in Bootstrap Collapse / Accordion


ACF_FORM Google Maps Field in Bootstrap Collapse / Accordion

  • 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('', 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!

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

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

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

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘ACF_FORM Google Maps Field in Bootstrap Collapse / Accordion’ is closed to new replies.