Support

Account

Home Forums Front-end Issues Enqueue Google Map

Solving

Enqueue Google Map

    • jarvis

    • March 31, 2020 at 9:01 pm

    Hi All,

    I hope you’re all staying safe!

    I’m having a right mare with something which should be so simple!!

    If I add the ACF Google Map JS code to my theme footer, it works.

    If I enqueue it via the functions file like so:

    
    function prefix_enqueue_scripts() {
    
        wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=MY-KEY-HERE' );   
        wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/acf-map.js', array('jquery', 'google-maps'), '', true);
    
    }
    add_action( 'wp_enqueue_scripts', 'prefix_enqeue_scripts' );
    

    It simply won’t work. No errors etc.

    Any help would be very much appreciated!

    Thanks

    • rudtek

    • April 1, 2020 at 2:21 am

    You have a typo. You spelled enqueue wrong on the add action line for your function name. I usually add “true” to the google-map script as well.

    • jarvis

    • April 1, 2020 at 6:43 pm

    Hi @rudtek

    Thanks for the reply. Can’t believe I missed the typo.

    Ok, I’ve amended the typo and tried with true (several ways) but still no joy:

    
    function prefix_enqueue_scripts() {
    
        wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=KEY' );   
    	#wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=KEY', true );  
    	#wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=KEY', '', true );  
        wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/acf-map.js', array('jquery', 'google-maps'), '', true);
    
    }
    add_action( 'wp_enqueue_scripts', 'prefix_enqueue_scripts' );
    

    Checking the console logs, it shows:
    Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

    If I check the source code, I can see the script is called but seems to get truncated:
    <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js'></script>
    It’ missing the API key or is that correct?

    Thanks

    • rudtek

    • April 2, 2020 at 2:07 am

    You actually have a key there right? I’m assuming you just removed it for the purpose of the question?

    • jarvis

    • April 2, 2020 at 2:14 am

    @rudtek yep, thought it was safer removing it in the forum!

    • rudtek

    • April 2, 2020 at 2:27 am

    You could try mine I guess…

    function rt_load_plugin_css () {
    	$mapkey;  //replace variable with your actual ke
    	$mapkeyurl = 'https://maps.googleapis.com/maps/api/js?key='.$mapkey;
    	$dir_url = get_template_directory_uri() . '/js/acf-map.js';
    
    	wp_enqueue_script( 'map_script', $dir_url, array('jquery'), '1.0', true );
        	wp_enqueue_script( 'googlemap', $mapkeyurl, true);
    }
    add_action ('wp_enqueue_scripts', 'rt_load_plugin_css');
    • jarvis

    • April 2, 2020 at 2:45 am

    Thanks

    I still get the same issue

    I’m totally baffled as it’s a blank theme with only a couple of plugins but yet it won’t work!

    Very odd!

    • rudtek

    • April 2, 2020 at 3:51 am

    just tried with your code on my server and my api key and it’s working fine.

    A couple questions. Are you using a child theme?

    On google’s site it says:

    If you are loading Maps JavaScript API from the deprecated v2 path, you will get the NoApiKeys warning, even if you specified the key parameter. Please check the v2 to v3 upgrade guide and migrate your application to Maps JavaScript API v3.

    Maybe try a new API key?

    • jarvis

    • April 2, 2020 at 6:32 pm

    Morning @rudtek

    Thanks for confirming my code worked, that was useful.

    I ended up stripping anything else out my functions file, low and behold, the map displayed.

    I worked through adding the other functions back in until it broke. I then found the below was the reason why it wasn’t working:

    
    ###
    # REMOVE QUERY STRINGS FROM STATIC RESOURCES
    ###
    function cleanup_query_string( $src ){ 
    	$parts = explode( '?', $src ); 
    	return $parts[0]; 
    } 
    add_filter( 'script_loader_src', 'cleanup_query_string', 15, 1 ); 
    add_filter( 'style_loader_src', 'cleanup_query_string', 15, 1 );
    

    It now works!

    Thanks for your time and help!!

    • rudtek

    • April 3, 2020 at 3:22 am

    glad to hear!

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.