Loading Google Maps API throws "Loading the Google Maps JavaScript API without a callback is not supported" [duplicate]

Question

How to fix the following console errors.

1. Loading the Google Maps JavaScript API without a callback is not supported
2. InvalidValueError: not an instance of HTMLInputElement

Because 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.

Answer 1

TL;DR

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

---

Full Explanation

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.

How can I fix it?

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.

But I don't have/need a callback function!

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...

Answer 2

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.