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

Navigation
1

Currently I just upload what I have from my website to a test server and it is free, locally if the api of google maps 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 I stop working properly.

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 and do not modify anything of the script , that remained intact.

Code to put the google map: 

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

Code to send the api with its key code 

        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA49iAee5kSTQ-whGT3A77H-PJsK5FzLCk&callback=initMap" async defer></script>
    
asked by David 20.07.2017 в 07:10
source

1 answer

1

That message comes to you because in your browser you have denied geolocation permits.

In the JavaScript code where you make the navigator.geolocation call, you should check if the user has given the browser permission to inform your JavaScript code of your 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
    };
} else {
    alert("Your browser doesn't supports Geolocation or you denied the permission to geolocalizate your device");
}

Currently you already have a part of the code that manages when the browser does not have geolocation or the permissions have been denied. It is done on the line 

handleLocationError(false, infoWindow, map.getCenter());

And it's the one that gets the point on the map with the message Error: The Geolocation service failed

    
answered by 20.07.2017 в 08:34
Configure Babel in my work team URL encoded% 7B% 7B $ -% 7D% 7D /% 7B% 7B $ -% 7D% 7D