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…
So I took the sample code from their README.md and README.md files and stitched together a working (uhm api key) sample on StackBlitz.
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:
- Success
- Invalid API key
- Invalid URL for the Google Maps API call
In case of an invalid API key, the <google-map> component raises the authFailure event
In case of an invalid URL, there is no script to initialize the google namespace, and you can check whether the objects window["google"] and window["google"]["maps"] exist.
The code is also available as a GitHub repository.
devioblog 