Angular Google Maps Demo

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 and 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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.