ACF front-end form Google Maps + Regular Maps

• len

• August 11, 2016 at 8:15 pm

Hi There,

I’m running into a little issue. I’ve followed this FAQ-article:
https://www.advancedcustomfields.com/resources/google-map/

To try and make a Google Map displaying my posts as markers. This works if it’s stand alone, but on the same page you have a front-end submission form wich also contains a Google Maps fields.

Because of that front-end form the maps api is loaded twice, and doesn’t work.
And if i remove the script it says ‘google’ is not defined and only the little map in the frond-end field works.

Any ideas how I can make it work with both maps on the same page?

Thanks in advance

• len

• August 11, 2016 at 8:40 pm

This reply has been marked as private.

• James

• August 15, 2016 at 4:05 pm

Hi @len

For the page with a front end form, could you please remove the Google Maps script inclusion? Then, instead of this code:

$(document).ready(function(){

    $('.acf-map').each(function(){

        // create map
        map = new_map( $(this) );

    });

});

Could you please use the following code instead?

acf.add_action('load', function( $el ){
    
    $('.acf-map').each(function(){

        // create map
        map = new_map( $(this) );

    });

});

This code will make sure that ACF’s assets are loaded first, including the Google Maps script inclusion by ACF. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/.

I hope this helps 🙂

• len

• August 15, 2016 at 7:47 pm

Hi James,

Again to the rescue, you are a champ. Thanks!

• pjsando

• August 1, 2018 at 6:47 pm

Hi James,

I have a similar issue, but I’m a bit unsure how to implement the fix.

The first map works fine and shows locations.

The google map in the form to submit new locations, however, does not work –

I have tried removing the script – that removes the top google map but the map in the submission form still doesnot show.

Any ideas?

Thanks for your help

Patrick

Screenshot_2....png