Display and Track User’s current location using Google Map Geolocation in Angular 5

There are many web applications around us which wants to track our current location to show best results. For example, consider eatery/food delivery app or online hotel booking app — as soon as you visit their website there shall be a popup in browser asking for user’s current location like below:

In this article we shall see how to have this feature in Angular 5 application. Checkout live application demo:

Browser’s Geolocation APIs:

Many modern browser supports API to query user’s current location using navigator.geolocation object. This object has two interesting methods — (a) getCurrentPosition and watchPosition.

getCurrentPosition calls a callback function and pass a position JSON like object encapsulating latitude and longitude when called.

watchPosition keeps calling callback function by passing same position object whenever user’s current location changes.

Google Map’s Geolocation APIs

Once we got lat-long information, we can use Google Maps Geolocation APIs for plotting “Marker” on user’s current position and keep it updated whenever user’s current location changes.

If you need to know how to integrate Google Maps in Angular, checkout my other blog:

You can find complete source code on my GitHub repository:

Cheers!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store