In this blog, I would like to share with you a custom component which can be able to locate your geolocation on the google map. This component is developed using the lightning:map base component and navigator api in browser window object.

Html template is simple and it only contains a map component surrounded by a lightning card. The Geolocation API allows the user to provide their location to web applications and it can be accessed via a call to navigator.geolocation. Browser’s geolocation is accessed in the renderedcallback method as the location should be captured before on the component rendering phase.
getCurrentPosition()
method in the Geolocation API is used to get the current position of the device by providing options along with success and error callback.
navigator.geolocation.getCurrentPosition(<success callback> , <error callback>, [options])
Option is an optional object of PositionOptions
objects which includes below parameters
maximumAge
: integer (milliseconds) | infinity – maximum cached position age.timeout
: integer (milliseconds) – amount of time before the error callback is invoked, if 0 it will never invoke.enableHighAccuracy
: false | true
Sample option parameter passed to navigator api is given below and make necessary modification as per your requirement.
options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 };
Also, we have used a isRendered flag which will helps to restrict to access the location api multiple times otherwise browser will be blocked and restricts other components from rendering on the browser.

Please go through below link for more details
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
