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

Question

Currently I just upload what I have from my website to a test server and it is free, locally if the google maps API works and shows me the location where I am currently. But when I uploaded my website to the server and modified everything necessary to make everything look good, that part of the Google Maps API stopped working correctly.

Google maps api code:

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow({map: map});

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };


            infoWindow.setPosition(pos);
            infoWindow.setContent('Esta es tu ubicacion');
            map.setCenter(pos);


            var icon = {
    url: "vista/multimedia/imagenes/pointer.png", // url
    scaledSize: new google.maps.Size(30, 30), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
                position: pos,
                map: map,
                title: 'marker with infoWindow',
                icon: icon
           });
           marker.addListener('click', function() {
               infowindow.open(map, marker);
          });


          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
      }

The error that I get is the following:

Error: The Geolocation service failed

I do not modify anything of the script, that remained intact.

Code to put google map:

<center><div id="map" style="height:500px;width:900px;margin-top:5%;"></div></center>

Code to send the api with its respective key

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA49iAee5kSTQ-whGT3A77H-PJsK5FzLCk&callback=initMap" async defer></script>

Current Result

Web console error:

[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

Answer 1

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.

Answer 2

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.

Answer 3

In my case, Changing the browser permission to 'allow' works. When a browser does not have a location access also cause the same error.

Answer 4

After trying hard, to load map and use Geolocation service to get user's location and every time getting

"The Geolocation service failed."error,

I tried to deploy my code on secured web hosting like

"GitHub pages"

and using https service, over and over again I've got the same error

"The Geolocation service failed."!

finally I've found what the problem was

It was "Desktop Google Chrome" !

(also I've checked it out on windows 10 and 8.1) (Google Chrome is up to date Version 91.0.4472.124 (Official Build) (64-bit))

After that I visited my page with

"Microsoft edge",

the problem was gone and I could easily get user's location and then I've tried my phone's google chrome browser and there it worked as well!