The Angular Components documentation on its Google Maps component does not contain a working demo. Probably that’s because it would need to incorporate a YOUR_API_KEY value…
I noticed that while my code works find on my local machine, the StackBlitz version will raise an error in the console
Error in src/app/google-maps-demo/google-maps-demo.component.ts (14:11)
Cannot find namespace ‘google’.
This error is caused by the fact that the namespace google.maps is only created if the Google Maps API is loaded successfully.
Which brings me to error handling:
Essentially there are 3 cases that need to be dealt with:
- Invalid API key
- Invalid URL for the Google Maps API call
In case of an invalid API key, the
<google-map> component raises the
In case of an invalid URL, there is no script to initialize the
The code is also available as a GitHub repository.