Geo Location not working in Chrome

问题

I am just using the code from the following URL with and without API, however the location is not loading on Chrome. The same works fine on IE and Firefox.

Can anyone help me understand whats the issue. Please note Location is turned on under the Chrome Settings

https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

Any help in this regard is appreciated

<script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.

      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.');
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    </body>
</html>

回答1:

If you plan to use any of Google's API, Maps for this instance, you need to obtain an API Key first as stated in the Maps JavaScript API. Make sure that it is of Browser type. .

So in your case replace the YOUR_API_KEY with the one obtained in your Google Developer Console like:

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

Also, dont forget to register the URL origin. This can either be a localhost or a deployed URL, e.g.:

http://localhost:3333, http://myintranet, http://192.168.1.1, http://mywebsite.com

回答2:

Only for HTTPS!

[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.

回答3:

I've just write 127.0.0.1 instead of localhost in browser URL and it worked for me.

来源：https://stackoverflow.com/questions/37429618/geo-location-not-working-in-chrome

标签

google-maps

google-chrome

google-maps-api-3

maps