How to fix the following console errors.
Loading the Google Maps JavaScript API without a callback is not supportedInvalidValueError: not an instance of HTMLInputElementBecause of the above errors, my jobs are not showing in Google search results.
I'm not a developer, so I need suggestions to fix this problem. I will incorporate the necessary changes in my WordPress website.
Use Function.prototype as a noop callback to quickly get rid of the error message.
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=Function.prototype
According to the Google Maps API documentation, the callback parameter has been required for a very long time. In practice, however, Google has only recently (within the past few days) begun enforcing this requirement.
While it doesn't seem to break anything, it now shows an ugly error message in the console...
Loading the Google Maps JavaScript API without a callback is not supported.
The short answer is to specify a callback value. Set the name of the JavaScript function that you would like to trigger once the external API library has finished loading.
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=FUNCTION_NAME
Be warned, you must specify a real function name! Otherwise you'll trigger an "is not a function" error message, and simply be trading one error message for another.
If you don't actually have a callback function to run immediately after the library loads, you can use Function.prototype as a noop stand-in.
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=Function.prototype
The Function.prototype method is native to JavaScript, and does absolutely nothing... It's exactly what you need in a situation like this!
For more information about Function.prototype, see this unrelated SO thread...
I actually created a noop function so I could keep track of when it was called.
function gmNoop() { console.log('GMap Callback') }
Then added it to my Google map API resource request.
https://maps.googleapis.com/maps/api/js?key='.GOOGLEMAPSKEY.'&callback=gmNoop
The reason I needed this was because my application calls initMap() after other prerequisites. Calling initMap() prior to these other resources would load a map without markers.
I just found this yt video which may help you:
https://www.youtube.com/watch?v=1asukrHEqMM&ab_channel=KnowledgeBase
It didn't help me much as my problem is slightly different, but gave me an idea of what way to go. Hopefully it helps you. Good luck
::::::::::E D I T::::::::::
Basically what you have to do to get rid of this error is to declare the function (aka initMap) before running the script where you make the API call.
The initMap function is the function where the google map is created and given the characteristics and all that.
initMap function looks like this:
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
The API call is the script line where we put the API-KEY.
<script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&callback=initMap"></script>
I found two ways to do it, the first way is: have a module that you only have to call before the API with a src script.
Example:
<html>
<head>
<script defer src="js/scripts.js" type="module"></script>
<script src="js/module/google.js"></script>
<script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&callback=initMap"></script>
</head>
<body></body>
</html>
Dentro de google.js es donde guardo mi funcion de initMap()
The second way is: write all the code inside a script tag before making the API call.
Example:
<html>
<head>
<script defer src="js/scripts.js" type="module"></script>
<script>
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
</script>
<script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&callback=initMap"></script>
</head>
<body></body>
</html>
Note that I use defer so that the code loads at the bottom of the page, this is just my style because I like to declare everything in the head element.
