Angular – Display Current Location Using Google Map

In this blog post, I’m going to show you how to display your current location with google map. I’m going to use Angular Google Maps ( AGM ) to speed up the development time and it is also very easy to use. It is also a nice way for me to try out libraries in Angular ecosystem.

Set up

To add the library to your project, open a command prompt and run this command

And add the necessary imports to your app.module.ts

Getting API Key

  1. Go to the Google API Console.
  2. Select a project or create a new one. Note that if you are a Firebase user, you can see your project here and use it for getting an API key.

 

 

3.

Replace the placeholder key in the app.module.ts with your own key.

We’re done with the setup.

Now we can use the agm like this

 

To mark our current location, we are mainly interested in “latitude” and longitude” inputs.

All we have left to do is get those values. We can get those values with the code snippet below.

 

That’s it. Thanks for reading.

 

Here’s the stackblitz demo

Leave a Reply

Your email address will not be published. Required fields are marked *