Why the Google Maps API does not work on a server? [Error: The Geolocation service failed]

According to your console error you are hosting the site to an http server and Google maps and the browser geolocation API will only work over https connections. Try uploading your code to a secure server like github pages.

The error has nothing specifically to do with Google Maps. It's telling you that the geolocation APIs on your browser (getCurrentPosition() etc.) no longer support the insecure HTTP protocol. Instead, you need to use the secure HTTPS protocol.

This means you'll need to get an SSL certificate for your site. You could use Let's Encrypt to get a free SSL certificate. The only catch is that you'll have to renew it every few months, but that process can be automated.

If you're just testing your application, and don't mind someone else's domain name in the address bar, hosting services like Heroku are HTTPS by default. If the application is purely frontend (HTML, CSS and Javascript only), you could also host them on AWS S3 or Github Pages.

As long as the URL you're hosting at starts with https:// this error should not happen.