Despite encountering this question multiple times, I have not been able to find a solution that works for me. My dilemma involves declaring a class in the following manner:
class Popup extends google.maps.OverlayView {
// Classy stuff
}
Unfortunately, every time I attempt to do so, I encounter the error
Uncaught ReferenceError: google is not definedThe peculiar thing is that Google Maps functions perfectly fine elsewhere in my code, except when I declare this specific class. Additionally, I am declaring it immediately after a class like this:
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss',]
})
export class MapComponent implements AfterViewInit, OnDestroy {
map: google.maps.Map; <-- No issue with google namespace here
// Map stuff
}
class Popup extends google.maps.OverlayView { <-- The problem arises with this google namespace
// Classy stuff
}
Upon refreshing the page, sometimes it loads successfully, while other times it crashes and displays the aforementioned error message.
I include the necessary script in my index.html like this:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myKey&libraries=places"></script>
This method has always worked flawlessly before (I extensively utilize Google Maps throughout this project without any issues concerning any other google namespaces, except when creating this particular class).