navigator.geolocation.watchPosition fails on MacOS Monterey with google chrome-CodePudding

I'm writing an angular 14 application with chrome browser and MacOS Monterey and i'm trying to get the user current geo position on the browser using in order to display it with the @angular/google-maps api.

so in the component's ngOnInit() I have the following code:

  ngOnInit(): void {
    navigator.geolocation.watchPosition((position) => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      }
    },function(positionError){
  alert('User not allowed - '   positionError.message);
    },{timeout:10000})
  }

so the alert User not allowed - User defined Geolocation is displayed.

I tried to google and read on stackoverflow questions and i read that i must use ssl now.

so i run the development environment using ng serve --ssl, the browser asks for permission to get the current location but the results are the same, still the error alert is displayed.

what am I missing ?

CodePudding user response：

I noticed that the browser had an icon that shows that location services is not enabled on my MacOS, i disabled and re-enabled it and now it works.

adding the permission api messes things up for me, having my regular code is enough for the user to allow permissions and then getting the location

CodePudding user response：

I think it can sound weird, but let me show you the best way to test, accordingly my testing, it will fail every time you save the component/html in realtime (call it as live reload).

Let's hit F5 (Refresh) in every test, and you will get your results, your code is ok, but you need to refresh manually in order to get the data, if you just live reload the page, you will get something like "error 3, timeout", let's test and let me know if it worked for you.

My example: https://stackblitz.com/edit/angular-ivy-txnone?file=src/app/app.component.html