Problems loading Google Maps API callback script in Webpack bundle - javascript

I have a function initMap() that is supposed to be called when the Google Maps API has finished loading. This function manages all of the settings for the map I use in my web-app.
initMap() lives in a file called init-map.js.
I'm migrating to Webpack, so init-map.js is now being included in index.js using require('./scripts/init-map.js.
I'm getting an error InvalidValueError: initMap is not a function, but when I load init-map.js using its own <script> tag, I don't get the error.
Causes error:
<html>
<head>
...
<script src="bundle.js"></script> <!-- init-map.js is required in this file -->
</head>
<body>
....
<script src="https://maps.googleapis.com/maps/api/js?key=🔑&callback=initMap" async defer></script>
</body>
</html>
Works without issue:
<html>
<head>
...
<script src="bundle.js"></script>
<script src="./scripts/init-map.js"></script>
</head>
<body>
....
<script src="https://maps.googleapis.com/maps/api/js?key=🔑&callback=initMap" async defer></script>
</body>
</html>
I don't understand how to make initMap() available for the Google Maps API when it makes the callback.
I would also prefer to have the init-map.js managed within index.js.

I believe this is because the bundler changes the name of your initMap function to something like a single letter, e.g. e or f.

Please check your calling part. Is it throwing 404 errors? on inspect element -> Network
Try using from "./scripts/init-map.js" to "/scripts/init-map.js" or "scripts/init-map.js"

Related

Uncaught ReferenceError: onOpenCvReady is not defined

I tried openCVjs tutorial in my local and everytime I load it I get error on console
What I have tried ?
Loading without a file server, because the openCV.js library is around 11mb. So thought that could be an issue.
Loaded with simpleHTTPserver using python even then I got the same error. Attached below screenshot of the network requests.
Please note that test.js resides in the same path as that of openCV.js but test.js works because I tried console.log from it.
You should load opencv.js asynchronously.
Add this into your index.html
<script>
function onOpenCvReady() {
console.log( 'OpenCV Ready', cv);
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript">
</script>
In my case, it only works when the onOpenCvReady() function is declarated in an HTML page.
When the function is loaded from an external test.js file, I have to refresh the index page two times, then it suddenly works without any errors.
I embedded it into my HTML page like this:
<p id="status">OpenCV.js is loading...</p>
<!-- <script async src="js/main.js" type="text/javascript"></script> -->
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
<script>
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>

Google Maps Onload Callback -Angular

I'm struggling with adding Google Maps JS API to my Angular project.
In index.htm I have:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
async defer></script>
In my component, how is it possible to know that the maps api is fully loaded and available?
To be clear, for example, in Google Charts API, we can call:
google.charts.setOnLoadCallback();
to initiate other functions.
You can try using the onload event in you script tag:
example(https://codepen.io/larryjoelane/pen/BJmOxB?editors=1112):
<script>
function jsFileLoaded() {
console.log('file loaded!');
}
</script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" onload="jsFileLoaded()" async defer></script>

kongregate not defined error javascript

I have included the required files in the head as it says in the docs
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
And then right above my scripts i included the script that supposed to define the variable
<script>
kongregateAPI.loadAPI(function(){
window.kongregate = kongregateAPI.getAPI();
});
</script>
But in the console I am still getting this error
Uncaught ReferenceError: kongregate is not defined
You said:
And then right above my scripts i included
Does it mean that your code looks like this?
<script>
kongregateAPI.loadAPI(function(){
window.kongregate = kongregateAPI.getAPI();
});
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
If so, you should call kongregateAPI functions after you loaded api js file:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
<script>
kongregateAPI.loadAPI(function(){
window.kongregate = kongregateAPI.getAPI();
});
</script>
I've tried it, everything works fine.

How to create Backbone View in a separate js file

I'm trying to understand how to modularize the Backbone ToDo tutorial
Originally everything is inside the same file, but if I try to extract to another file:
var TodoView = Backbone.View.extend({
...
});
then this throws an error:
var view = new TodoView({model: todo});
**Uncaught TypeError: undefined is not a function**
It's probably due to a scope issue, but I don't know how to create a reference inside the $(function() so I can create this new object inside the main function.
Assuming that your first code part is TodoView.js,
and your second code part is app.js.
Write your html file like this,
<html>
<head>
<script type="text/javascript" src="js/TodoView.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
// your dom
</body>
</html>
(Edited, at 2015-07-27)
sorry for my late reply.
how about this?
<html>
<head></head>
<body>
<!-- your dom -->
<script type="text/javascript" src="js/TodoView.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
In many case, most javascript codes are appended to just before </body>, so that javascript can use your dom!
You can use something like require.js to load your external files and manage dependancies.
Ok, the solution was to move the script references to the end of the body instead of inside the head tags.
I think that the reason is that TodoView.js is making use of templates that were defined in the body, and since the js file was being loaded before the body, the templates were not yet available.

Load a .svg to display with javascript in rails

I'm trying to use kartograph.js to display a svg map located in /public in a rails application and cannot figure out how to load the map. Here's my .js.coffee.erb file:
$ ->
map = $K.map('#map')
# map.loadMap("#{Rails.root}/public/Blank_US_Map.svg", loaded) # attempt 1
map.loadMap("Blank_US_Map.svg", loaded) # attempt 2
loaded = () ->
map.addLayer('baseLayer')
The error thrown in the console is Uncaught TypeError: Cannot call method 'getAttribute' of undefined, though I believe the problem is that no file is being loaded.
The issue comes from the library you're using, Kartograph. It needs a SVG file with absolute coordinate, or you'll most likely get this error.
You can confirm that by trying a pure-HTML-and-js version, e.g. :
<html>
<head>
<script src="jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="kartograph.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
$(document).ready(function() {
var map = kartograph.map('#map');
function callback(mymap) {
// Stuff
}
map.loadMap('Blank_US_Map.svg', callback);
})
</script>
And see if you get the same error.

Categories

Resources