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

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

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.

Advertisement

Answer