title: Why the Google Maps API does not work on a server? [Error: The Geolocation service failed]
body: <p>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.</p>
  
  <p>Google maps api code:</p>
  
  <pre><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.');
        }
  </code></pre>
  
  <p>The error that I get is the following:</p>
  
  <blockquote>
    <p>Error: The Geolocation service failed</p>
  </blockquote>
  
  <p>I do not modify anything of the script, that remained intact.</p>
  
  <p>Code to put google map:</p>
  
  <pre><code>&lt;center&gt;&lt;div id="map" style="height:500px;width:900px;margin-top:5%;"&gt;&lt;/div&gt;&lt;/center&gt;
  </code></pre>
  
  <p>Code to send the api with its respective key</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA49iAee5kSTQ-whGT3A77H-PJsK5FzLCk&amp;callback=initMap" async defer&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Current Result</p>
  
  <p><a href="https://i.stack.imgur.com/SH9sT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SH9sT.png" alt="enter image description here"></a></p>
  
  <p>Web console error:</p>
  
  <pre><code>[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.
  </code></pre>