I've seen this question asked 100 times, but none of the answers seem to work. I'm trying to declare a class like this:
class Popup extends google.maps.OverlayView {
// Classy stuff
}
but I always get the error Uncaught ReferenceError: google is not defined
Thing is, Google Maps works everywhere else in my code, but not when I declare this class. Also, I'm declaring it just 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 problem with google namespace here
// Map stuff
}
class Popup extends google.maps.OverlayView { <-- Problem is with this google namespace
// Classy stuff
}
and I refresh the page and sometimes it loads, and other times crashes and gives me that error.
I'm loading in my index.html like this:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myKey&libraries=places"></script>
and it's always worked (I use google maps all through this project, and have yet to have an issue with any other google namespace. Just when I try to create that class)
