Use of snazzyInfoWindow

[yvancoyaud]

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

Can anyone help me ?
Thank you
YC

[kuroki]

Have you included all necessary files?

If it’s not defined, that could mean you don’t have imported/included all files needed to create SnazzyInfoWindow.

[coagmano]

Can you post the code where you use SnazzyInfoWindow?

It’s likely just a matter of importing it properly, since installing something from npm does not automatically make it a global variable

[yvancoyaud]

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() ;
}
}

[yvancoyaud]

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.

Thanks for your help

[coagmano]

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:

atmist/snazzy-info-window/blob/master/dist/snazzy-info-window.js#L756-L757

Which means you can import the module like so:

import SnazzyInfoWindow from `snazzy-info-window`;

[yvancoyaud]

Thank you for your reply.

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 ()

[coagmano]

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:

atmist/snazzy-info-window/blob/dd49636d356f204d15008c8190aefbe2f743364f/src/snazzy-info-window.js#L122-L131

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)