Google is not defined in Google Chrome but Mozilla without an error

PHP
1

How to manage callback as Mozilla is working and API detected bur google Chrome console throws an error using a hook inside functions.php?

var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=&callback=Function.prototype&language=fr';
document.head.appendChild(script);

functions.php

<?php
	wp_enqueue_script('js-load1', get_template_directory_uri() . '/js_load.js', '', '', true);
?>
2

The problem might be due to various reasons, including asynchronous loading, restrictions by Google Chrome, or potential conflicts with other scripts. When dealing with external scripts, especially ones like Google Maps API, you should be cautious about how you enqueue and use them.

Let’s try to solve the issue like so;

Async Loading - It’s possible that the Google Maps script hasn’t fully loaded when you’re trying to use it. In the script URL you provided, you’re using &callback=Function.prototype , which essentially means “do nothing” once the script loads. Instead, you can define a function that will get called once the script is fully loaded , like this

function initMap() {
    // Your Google Maps initialization code here
}

var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=YOUR_KEY&callback=initMap&language=fr';
document.head.appendChild(script);

When working with WordPress, it’s best to utilize the built-in functions to load scripts. To enqueue the Google Maps script properly like this

function enqueue_google_maps() {
    wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=YOUR_KEY&callback=initMap&language=fr', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_google_maps');

Notice that the third argument to wp_enqueue_script is an empty array, which means the script has no dependencies. The true at the end ensures that the script is loaded in the footer.

Good luck

3

Thank you for the message!
I have two questions regarding callback:

  1. Is it needed modification?
&callback=initMap

to

&callback=Function.initMap

or we leave FUNCTION?
2. How to arrange callback if you just need API without CALLBACK function without Google warning as it is request from Google? Otherwise it will be an error message:Uncaught (in promise) InvalidValueError: initMap is not a function

4

The &callback=initMap part in the URL is telling Google Maps to execute the initMap function once the Maps API script is loaded. This function should exist in your global JavaScript scope.

You do not need to change it to &callback=Function.initMap unless you actually have your initMap function defined inside a Function .

it would help if you had a globally-accessible initMap function defined somewhere in your script, in order to use it as &callback=initMap .

6

So, InitMap is needed only for maps and we init?

Contact_us_page.initMap();

We need Google API due to street address. If you use Google API for street address detection we do not need init. As I understand Google requests callback but this will throw function not found as function is not needed sometimes.

7

Do you have the initMap function set? That’s why you are getting the error.

If your code executes as expected, don’t include the initMap