Support

Account

Home Forums Front-end Issues how to trigger google.maps.event.trigger(map, 'resize') on acf_form google map

Solving

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

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

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

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

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

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

The topic ‘how to trigger google.maps.event.trigger(map, 'resize') on acf_form google map’ is closed to new replies.