Hi everybody
Does anyone use “snazzyInfoWindow” with meteor?
I install this package with : **meteor npm install --save snazzy-info-window**
but I have this error from the first use : **ReferenceError: SnazzyInfoWindow is not defined**
Okay,
First, I do the installation: npm install --save snazzy-info-window
and I check the presence of the “snazzy-info-window” directory in the “node-modules” directory
My code in Template.MONTEMPLATE.rendered
// I am waiting for the loading of googlemap
let int = setInterval(googleCharge, 200);
function googleCharge() {
if (typeof google !== undefined) {
clearInterval(int);
// I display the map
let map = new google.maps.Map(elemMap, {
zoom: 8,
center: {lat:45.47671759842219, lng:-0.7970119099885551}
});
// I display a Marker
let marker = new google.maps.Marker({map: map, position: {lat: -27.467, lng: 153.027},});
// Je construis la fenêtre snazzy
let infoWin = new SnazzyInfoWindow({
marker: marker,
content: ‘fenetre Snazzy!’
});
// J’affiche cette fenetre
infoWin.open() ;
}
}
Excuse me for this handling error on the previous message
Okay,
First, I do the installation: npm install --save snazzy-info-window
and I check the presence of the “snazzy-info-window” directory in the “node-modules” directory
My code in Template.MONTEMPLATE.rendered
// I am waiting for the loading of googlemap
let int = setInterval(googleCharge, 200);
function googleCharge() {
if (typeof google !== undefined) {
clearInterval(int);
// I display the map
let map = new google.maps.Map(elemMap, {
zoom: 8,
center: {lat:45.47671759842219, lng:-0.7970119099885551}
});
// I display a Marker
let marker = new google.maps.Marker({map: map, position: {lat: -27.467, lng: 153.027},});
// I build the window snazzy
let infoWin = new SnazzyInfoWindow({
marker: marker,
content: ‘fenetre Snazzy!’
});
// I display the window
infoWin.open() ;
}
}
Runtime error: Uncaught ReferenceError: SnazzyInfoWindow is not defined at googleCharge
Should we add an ‘import’ somewhere?
In general it is not necessary to make imports for packets load with npm.
It is always necessary to import from npm. Using modern build tools (like Meteor), the package code won’t even be added to the bundle and sent to the client unless it is imported somewhere.
The snazzy-info-window docs unfortunately don’t give any instructions on importing in a commonJS environment, but if you check the code, it uses a default export:
Which means you can import the module like so:
import SnazzyInfoWindow from `snazzy-info-window`;
Of course, the import solves the problem on the “new SnazzyInfoWindow” but it thinks that the module is not to load since now there is an error on open of the window.
Error : modules.js?hash=559d2a9509b14541019686c82239ebc30180ee04:1050 Uncaught TypeError: this.setMap is not a function at e.value (modules.js?hash=559d2a9509b14541019686c82239ebc30180ee04:1050) at googleCharge (ouSuisJe.js:64)
Line 64 of module “ouSuisJe.js” is the one that contains infoWin.open ()
Since that error originates from inside the module, it is definitely loaded.
The module throws an error when it tries to call this.setMap. Looking closer, that method isn’t defined on the SnazzyInfoWindow class itself, so it’s probably inherited.
Checking the source, we see it tries to subclass google.maps.OverlayView:
We can also see that it expects google to be already defined as a global variable, and that the constructor warns if it can’t be found.
My best guess is that the error throws there, because it’s not sub-classing properly, likely because it can’t find the google sdk in it’s scope.
Are you seeing the warning “Snazzy Info Window: Google Maps is not defined” in the console?
And how are you importing / including the google maps sdk?
If you’re importing, you may need to manually add it to the global scope so that SnazzyInfoWindow can find it for use.
Or if you are using an async script tag you may need to wait for it to be loaded (or change it to a sync tag)