I’m quite new to WordPress and I’m following a Udemy course on theme development and one part involves using the Google Maps API. When I register/enqueue the script, it doesn’t appear in the HTML source code when viewing the page. There are also no errors in the developer console either.

This is a snippet from my functions.php:

    wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(''), '', true);
    wp_register_script('fluidboxjs', get_template_directory_uri() . '/js/jquery.fluidbox.min.js', array('jquery'), '2.0.5', true);
    wp_register_script('script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0', true);

    wp_enqueue_script('googlemaps');
    wp_enqueue_script('jquery');
    wp_enqueue_script('fluidboxjs');
    wp_enqueue_script('script');
}

add_action('wp_enqueue_scripts', 'lapizzeria_styles');

And this is the HTML that is output below the footer (I believe I should be seeing a link to the Google API here):

<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/jquery.fluidbox.min.js?ver=2.0.5'></script>
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/scripts.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-includes/js/wp-embed.min.js?ver=4.7.4'></script>

Interestingly this line does appears in the head when I enqueue googlemaps:

<link rel='dns-prefetch' href='//maps.googleapis.com' />

As a bit of background on the issue:

The first step in the exercise was to place Google’s sample code (script & styles) directly into front-page.php and the map displayed fine.

The second step was moving that code out from the front-page.php and placing it in functions.php, scripts.js, and style.css.

Moving the styles to style.css works fine. Moving the initMap() function to scripts.js works fine. But when attempting to enqueue/register the Google Maps API in functions.php it doesn’t seem to be adding the for the Maps API under the footer as it does for other enqueued items.

I’m not sure if it makes a difference but I’m working locally and running MAMP. I’ve tried clearing my browser cache and using a different browser.

Any help would be appreciated!

Read more here: Can’t enqueue Google Maps JS API to WordPress


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: