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&callback=initMap&ver=4.7.4'></script>
Maybe something fishy going on with the #038;
appearing in the line above?
Any help would be appreciated!
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);