Uncaught ReferenceError: google is not defined about snazzy-info-window

[joelkravets]

I noticed this problem as well when we were using this project internally in our own ReactJS application.

Instead of using:
import SnazzyInfoWindow from 'snazzy-info-window';

Use the following:
let SnazzyInfoWindow = require('snazzy-info-window');

The reason the bug exists is because of this line right here:
export default class SnazzyInfoWindow extends google.maps.OverlayView {

We might be able to resolve this issue by adding a wrapper object around SnazzyInfoWindow which checks for the existence of google before trying to create the subclass.

Thanks for the feedback. Hopefully the above solution will work for you in the mean time.

[yeedle]

Thanks, the above solution works like a charm. And thanks for responding so fast!

One more question, how do I import the css?

[joelkravets]

You can import the css in your project with the following snippet:

import 'snazzy-info-window/dist/snazzy-info-window.min.css';

Note to self:
Add documentation about imports when fixing this bug.

[goldfinch]

Any updates on this?

I'm using the following as well:
let SnazzyInfoWindow = require('snazzy-info-window');

but Uncaught ReferenceError: google is not defined still appears occasionally and stops all other scripts

[yeedle]

Thanks once again! You're awesome!

[pttsky]

@goldfinch where exactly do you place that line in the code?

I was having literally the same issue after just replacing import to require statements in the top of my file. But that changes nothing in general.

But there is one benefit - you are allowed to use require statements anywhere in your file.

I used <script src=https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initMap async defer'></script> and then in my JS:

window.initMap = function() {
  const SnazzyInfoWindow = require('snazzy-info-window');
  new SnazzyInfoWindow({ /* ... */ });
}

P.S. For this case, const is more suitable over let.

[goldfinch]

@pttsky sorry for the late response,

I solved this issue using callback, to make sure that the google library loads first, eg:

<script>
window.initSnazzy = function(){
    
    let SnazzyInfoWindow = require('snazzy-info-window');
    
    // ....
};
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initSnazzy"></script>