How to fix the following console errors.
Loading the Google Maps JavaScript API without a callback is not supported
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.
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...
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.
Related
I'm working on google map API. I have added sync and defer to take less time to load. But after adding async it will affect to other sections.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
If we do not use async and defer what will happen. Can anyone point me in the right direction?
If you don't use the async in the script, the script will be loaded synchronously by the browser. But still, the Map will load without any issues.
As mentioned on Google Docs
The async attribute lets the browser render the rest of your website while the Maps JavaScript API loads. When the API is ready, it will call the function specified using the callback parameter.
An explanation for defer:
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
I'm using PrimeFaces extensions (6.1.0) to create some charts using pe:gChart.
One of the charts is a geo chart as appears in the showcase. No problems so far.
Another chart I need to render is a marker geo chart. This is not explained in the PrimeFaces extensions showcase, but I was hoping this would be an easy job. I ended up with this model (which I believe is correct):
GChartModelBuilder builder = new GChartModelBuilder();
builder.setChartType(GChartType.GEO);
builder.addOption("displayMode", "markers");
builder.addOption("region", country);
builder.addColumns("City", "Total");
for (...) {
builder.addRow(city, total);
}
When I run my project I do see a map for this chart. The region is correct, but no markers appear. There is marker data generated though.
My browser console tells me:
Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
Is there any way I can set this API key without creating hacks?
Update
I've created a custom renderer:
public class MyGChartsRenderer extends GChartRenderer
{
#Override
protected void encodeMarkup(FacesContext context, GChart chart) throws IOException
{
...
this.startScript(writer, chart.getClientId());
// Appended ?key=xxxxx to the URL (other lines are not modified)
writer.writeAttribute("src", "https://www.google.com/jsapi?key=xxxxx", null);
this.endScript(writer);
}
}
And loaded it in the faces-config.xml:
<render-kit>
<renderer>
<component-family>org.primefaces.extensions.component</component-family>
<renderer-type>org.primefaces.extensions.component.GChartRenderer</renderer-type>
<renderer-class>MyGChartsRenderer</renderer-class>
</renderer>
</render-kit>
But the Google Maps API error keeps appearing in my console.
DISCLAIMER: I created an answer, not because it is the answer but because it is so much information that it won't fit in a comment in any way any way (hmmm ;-))
DISCLAIMER 2: I might have missed some things and did not actually try... Hope you don't mind.
Note: Three months ago PrimeFaces extensions updated to a newer Google charts api version according to the commits and issue 452 with upcoming changes so I focussed on that!
In the PrimeFaces-extensions gchart.js I noticed
google.charts.load('current', {
packages : [ 'corechart', 'geochart', 'orgchart' ]
});
jQuery(document).ready(function() {
google.charts.setOnLoadCallback(function() {
that.draw();
});
});
While on on Visualization: GeoChart | Charts | Google Developers I saw
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
Related tot the issue commit/fix/issue, in the PrimeFaces extensions showcase source trunk I also noted they explicitly load
<script src="https://www.gstatic.com/charts/loader.js"></script>
in the xhtml.
Lots of upcoming changes, so the most future proof solution would be to try 6.2-SNAPSHOT and create a real good fix where you
add a mapsApiKey property and getters/setters to GChart.java
add .attr("mapsApiKey", chart.getMapsApiKey()) to GChartRenderer.java
add this.mapsApiKey = cfg.mapsApiKey -and 'mapsApiKey': this.mapsApiKey to gchart.js in the right places
As a workaround / hack I've put this script in my XHTML:
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx&v=3&callback=google.loader.callbacks.maps&sensor=false"></script>
I have a unique problem, namely I have a social website with a lot of interesting places. Every place has a google map. And today I see a problem.
When I add new place with address to make map from google api, it doesn't work.
I was checked previously added places and they normally have map, though error
"initMap is not a function".
Whats wrong? Why in newly created places map from google api doesn't work? I use it with my api key:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API&callback=initMap"></script>
Probably comes from script position in your code. Make sure;
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
load after script block containing initMap function.
<script type="text/javascript">
function initMap() {
//
}
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
Is there a function called "initMap" in your code? If not you will get this error. The async attribute lets the browser render the rest of your website while the Maps JavaScript API loads. When the API is ready, it will call the function specified using the callback parameter. If you want to have a different callback function with a different name, that is perfectly fine, but you will have to modify this request URL accordingly. You can also remove the callback parameter entirely if you wish to do so, but you will need to make a function call in your code to load the map. You will also need to remove async defer if you do this, otherwise you will get an error saying google is not defined. The modified script tag would be:
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
I have an example demonstrating this here:
https://jsfiddle.net/gy3yg9ma/11/
Please insert your own API key to use the sample. Notice how I had to call initMap(); manually in my code since I removed the callback parameter. The map will not load until a function is called to load it.
I hope this helps!
In a simple HTML5 web worker project, I have defined a web worker which exchanges messages using HTML5 messaging API. There is a source of confusion for me here due to the fact that we have defined two .onmessage handlers (callback functions), one in the main script and the other one in the worker.js:
index.html:
<!DOCTYPE html>
<html>
<body>
<script>
var worker = new Worker("worker.js");
worker.onmessage = function(event) {
alert("Reply from index.html:"+event.data);
}
worker.postMessage("message 3,");
</script>
</body>
</html>
worker.js:
this.onmessage = function(event) {
postMessage("message 0,"+event.data);
}
postMessage("message 1,");
one thing that i don't get is the order of messages being displayed!
it first displays this:
and then displays this
But why? I am confused how and when these handlers were called? first the worker.postMessage("message 3,"); triggers the worker.postMessage("message 3,"); in worker.js and postMessage("message 0,"+event.data); in returns triggers the worker.onmessage = function(event) in the main script! then at the very end the postMessage("message 1,"); from the worker.js triggers the onmessage of the main script(index.html). Can we say we are any postMessage call on a worker triggers the onmessage function of other web workers?
You might be confusing the Web Worker implementation with js methods that you may pass the objects as a function. WEB WORKERS in HTML5 are are bringing the THREADING TO JAVASCRIPT.
Reason seems to be in the append event of '.onmessage' and your worker.js starts with posted expression 'postMessage("message 0,"+event.data);' . The message 0 comes first because of that reason.
A good introductory tutorial like the following one should address your concerns - THE BASICS OF WEB WORKERS.
I can't seem to find any example of window.print() support in chrome packaged apps - can someone please post an example?
I'm using this
function clickHandler(e) {
window.print();
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', clickHandler);
});
from "Hello World!" sample platform app, but I can't seem to get it working.
is there a special permission settings I should use?
Thanks!
Yes, window.print() works in Chrome Apps. You can find a sample in the official samples repo.
It is as simple as calling window.print() in any DOM window of your app:
// prints the content of the current window:
window.print();
// prints the content of another AppWindow:
anotherAppWindow.contentWindow.print()
AppWindow is the Chrome Apps object that encapsulates and extends the actual DOM window with app capabilities. This object can be obtained by either:
saving the parameter from the callback of chrome.app.window.create
calling chrome.app.window.current() on any code running in the context of the desired window