Google maps API included multiple times

• michelecocuccio

• July 21, 2016 at 8:23 am

Hello there.

I added ACF PRO to the client website as I needed to create some custom post type with custom fields. One of this custom field has a google map option.
Unfortunately, the client is already using a plugin that use google maps script file, which is then embedded twice while I am editing the page (one by this plugin and one from ACF PRO), and there is no option to exclude google maps script to load (is highly customized so I think it’s pretty much necessary).
So I get this error:
You have included the Google Maps API multiple times on this page. This may cause unexpected errors. and ACF map stops to work.

Is there a way to dequeue the google map script from ACF PRO in a way that only the other plugin script will be used?

Thanks a lot,
keep the good work as I love this plugin a lot!

• James

• July 22, 2016 at 3:55 pm

Hi @michelecocuccio

I’m afraid this is not possible from ACF side. Could you please ask the plugin author if there’s a way to disable it from their side?

There is a similar issue with Enfold theme, and they can fix it by disabling it from Enfold’s side. This page should give you more idea about it: http://www.kriesi.at/support/topic/disable-google-maps-api-call-in-backend/#post-308708.

Thanks 🙂

• mcgwd

• October 5, 2016 at 12:35 pm

If we cannot remove the Google Maps API script added by ACF in the backend, is there a way to add a callback (initAutocomplete) to the script like:

https://maps.googleapis.com/maps/api/js?key=MY-KEY-HERE&libraries=places&callback=initAutocomplete

• James

• October 5, 2016 at 4:09 pm

Hi @mcgwd

Could you please tell me why do you want to use the callback feature? If you want to modify the options, you can always use the google_map_args Javascript filter instead. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/.

You can also execute Javascript code after ACF loaded all of the assets by using the load action. Kindly check the link I gave you before for more information regarding this action.

Thanks 🙂

• mcgwd

• October 6, 2016 at 2:57 am

I’m trying to incorporate auto-complete address fields as setup here:

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

I have it working in the front-end, but cannot add the callback to initAutocomplete per the script example.

• James

• October 6, 2016 at 11:11 am

Hi @mcgwd

You should be able to do it with the load action like this:

function autocomplete_map_init() {
    ?>
    <script type="text/javascript">
    (function($){

        $(document).ready(function(){
            
            // Do it after all of the assets are loaded
            acf.add_action('load', function( $el ){
                
                // Only execute the init function if there's a google
                // map on the page
                if( acf.fields.google_map.map ){
                    // execute the init function
                    initAutocomplete();
                }
                
            });

            
        });

    })(jQuery);
    </script>
    <?php
}

add_action('acf/input/admin_footer', 'autocomplete_map_init');

I hope this helps 🙂

• mcgwd

• October 7, 2016 at 8:16 am

Thanks. That seems to have fixed the callback issue but now I get the error:

ReferenceError: google is not defined

which stops the script at autocomplete = new google.maps.places.Autocomplete(…

Again, only an issue in the back-end.

• James

• October 7, 2016 at 12:59 pm

Hi @mcgwd

The error you got mostly because the Google Maps API is not loaded yet. Could you please make sure that the init code is executed inside the load action?

Or did you have a plugin that moves the scripts? Could you please try to reproduce the issue on one of the WordPress’ stock themes (like Twenty Sixteen) with other plugins deactivated? If it disappears, then you can activate the theme and plugins one by one to see which one causes the issue.

Thanks 🙂

• tnchuntic

• April 3, 2018 at 12:41 pm

You can try to override the ACF settings for “enqueue_google_maps”=false for it to not load the script in the frontend. Also, I’ve added is_admin() check just to be sure that it only trigger the override on front-end.

function my_acf_init() {
    if(is_admin()):
        return;
    endif;
    acf_update_setting('enqueue_google_maps', false);
}

add_action('acf/init', 'my_acf_init');