Can't enqueue Google Maps JS API to WordPress

Question

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 <script> 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. I've tried changing the order in which it is enqueued.

EDIT: One thing I have noticed, is that if I put a dependency in for googlemaps it DOES print the <script> tag I'm expecting but brings up this error in the console: initMap is not a function. My understanding is that Google Maps API shouldn't require jQuery to work so I'm not sure if this bit of extra info is relevant.

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&#038;callback=initMap&#038;ver=4.7.4'></script>

Maybe something fishy going on with the #038; appearing in the line above?

Any help would be appreciated!

Photoneutron

I would protect your googleMapAPI key now that they are charging for use of using it. – Diplegia

Answer 1

I suspect the issue is due to the dependency that has been set for googlemaps. Instead of passing in an empty array to specify no dependencies for the script, the array contains a blank string. The dependency can't be satisfied so the script isn't loaded.

Simply replace array('') with array().

wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(), '', true);

Confucianism

Thanks! Can't believe I missed that. – Photoneutron

Answer 2

Simply replace array('') with NULL. You can modify your query acording to the example.Add your maps key after &key=

wp_enqueue_script('googleMap', '//maps.googleapis.com/maps/api/js?&key=', NULL, 1.0, true);

Rotunda