web-dev-qa-db-fra.com

Pourquoi l'API Google Maps ne fonctionne-t-elle pas sur un serveur? [Erreur: le service de géolocalisation a échoué]

Actuellement, je télécharge simplement ce que j'ai de mon site Web sur un serveur de test et c'est gratuit, localement si l'API Google Maps fonctionne et me montre l'emplacement où je me trouve actuellement. Mais lorsque j'ai téléchargé mon site Web sur le serveur et modifié tout le nécessaire pour que tout soit beau, cette partie de l'API Google Maps a cessé de fonctionner correctement.

Code de l'API Google Maps:

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.');
      }

L'erreur que je reçois est la suivante:

Erreur: le service de géolocalisation a échoué

Je ne modifie rien du script, qui est resté intact.

Code pour mettre google map:

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

Code pour envoyer l'api avec sa clé respective

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

Résultat actuel

 enter image description here

Erreur de la console Web:

[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.
javascriptapigoogle-maps
6
David

En fonction de l'erreur de votre console, vous hébergez le site sur un serveur http et sur Google Maps. L'API de géolocalisation du navigateur ne fonctionne que sur des connexions https. Essayez de télécharger votre code sur un serveur sécurisé tel que les pages github.

7
CaptainJ

L'erreur n'a rien à voir avec Google Maps. Cela vous indique que les API de géolocalisation de votre navigateur (getCurrentPosition() etc.) ne prennent plus en charge le protocole HTTP non sécurisé. Au lieu de cela, vous devez utiliser le protocole sécurisé HTTPS.

Cela signifie que vous devrez obtenir un certificat SSL pour votre site. Vous pouvez utiliser Encryptons pour obtenir un certificat SSL gratuit. Le seul problème est que vous devrez le renouveler tous les quelques mois , mais ce processus peut être automatisé.

Si vous testez simplement votre application et que le nom de domaine de quelqu'un d'autre figure dans la barre d'adresse, les services d'hébergement tels que Heroku sont HTTPS par défaut. Si l'application est purement frontale (HTML, CSS et Javascript uniquement), vous pouvez également les héberger sur AWS S3 ou Github Pages .

Tant que l'URL que vous hébergez commence par https://, cette erreur ne devrait pas se produire.

5
Soviut

Dans mon cas, la modification de l'autorisation du navigateur pour «autoriser» fonctionne. Lorsqu'un navigateur n'a pas d'emplacement, l'accès provoque également la même erreur.

0
Dhananjayan