title: Google maps javascript API "geolocation service failed" in server but works on local
body: <p>So I set up a ngrok temporary server to show my employer how her website is looking but then noticed that google map's Javascript API fails while on ngrok, while on my localhost it's working, is this some quirk with ngrok or will it happen when we start hosting it on a real server?
  I have the geolocation on /scripts/js/geolocation.js and the page that is calling it is on /orders.php</p>
  
  <p>geolocation.js:</p>
  
  <pre><code>function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 6
      });
      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('Location found.');
              map.setCenter(pos);
          }, 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>orders.php:</p>
  
  <pre><code>&lt;div id="map"&gt;
      &lt;script&gt;initMap()&lt;/script&gt;
  &lt;/div&gt;
  
  
  &lt;script async defer
          src="https://maps.googleapis.com/maps/api/js?key=REDACTED&amp;callback=initMap"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Localhost:
  <a href="https://i.stack.imgur.com/vXUjU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vXUjU.png" alt="Local:"></a></p>
  
  <p>Ngrok:
  <a href="https://i.stack.imgur.com/JNWIs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JNWIs.png" alt="Ngrok"></a></p>