CODEWITHSUNDEEP
angulargoogle-mapstypescript
Jus10
Jus10

Reputation: 15669

Angular - Google maps API - Uncaught ReferenceError: google is not defined - only sometimes?

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)

Upvotes: 3

Views: 2563

Answers (2)

David
David

Reputation: 34435

It's probably because the overlay is not loaded yet, but the map is. If you look at the order in which scripts load, map is loaded before overlay; that's probably why you have the problem with overlay but not map. But you could still have problem with map I think, depending on network speed.

You should try without loading your script with async and defer to make sure that the library is loaded synchronously before you try to use it

Even Google suggest to load their script synchronously when trying to subclass the API classes

https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

In effect, this will subclass the overlay class therefore it's simpler to load the API synchronously

Upvotes: 1

Omar
Omar

Reputation: 180

You may want to review this Angular Google Map API Documentation before lurking around and looking for a work-around.

Feel free to review these answers on SO as they appear to address the same issue you are having.

It could be that: 1) Your scripts are not loading properly so the global Google.Maps is not recognized. or... 2) angular-google-maps is processing directives before Google Maps SDK is fully ready.

Upvotes: 1

Related Questions