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 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:
Integrating Google Maps in Angular 5
You may have seen many websites, mobile applications with GIS Map integrations. There are many map solutions but Google…
You can find complete source code on my GitHub repository:
Contribute to gmap-geolocation-demo development by creating an account on GitHub.