how to trigger google.maps.event.trigger(map, 'resize') on acf_form google map

• alexhendershott

• May 26, 2016 at 4:24 am

I will start with a thanks – Great Plugin, Great Documentation.

Now I am a developer and need a tricky help here.

– I added a google map custom field on posts.
– I am showing the edit post / add new post forms on frontend by using functions acf_form_head() and acf_form()
– everything works good
– now the forms are in a modal and I need to trigger google.maps.event.trigger(map, ‘resize’) when the modal opens . As the documentation mentions on https://www.advancedcustomfields.com/resources/google-map/ at the end of the page.

– Now since this is not a custom google map on front end, this map was created by acf_form. I am not able to find the javascript variable that stores the map instance

when I run google.maps.event.trigger(map, ‘resize’) obviously I get map is not defined

So can you please help me here and let me know the name of the javascript variable which stores the map instance created by acf_form so that I can trigger google.maps.event.trigger(map, ‘resize’) on it manually ?

Thanks in advance !!

• James

• May 26, 2016 at 1:59 pm

Hi @alexhendershott

I believe you can modify the map settings by using the “google_map_args” JS filter provided by ACF. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/#filters.

I hope this helps 🙂

• alexhendershott

• May 26, 2016 at 2:23 pm

Hey @acf-support , thanks for responding.

I already know about this filter acf.add_filter(‘google_map_args’, function( args, $field ) and its no help.

It do not provide instance of the map, it only provides the arguments passed to map and the field on which map is initiated.

I need an instance of the map to run google.maps.event.trigger( map , ‘resize’);

Please try to read my original post once again in detail. You will get the idea.

Thanks !

• James

• May 31, 2016 at 8:51 pm

Hi @alexhendershott,

You need to tell ACF that an element has changed from hide to show.
You can do this with the following JS code:

var $el = $('#form-wrap-that-is-now-visible');

acf.do_action('show', $el);

This should be run after your modal is visible.