google api geolocation sample security error

问题

I want to show the map here by google map api in local environment. I used the google api geolocation sample,

I have successfully showed the map in IE, but I could not show it in google chrome.

<!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>
    <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 src="https://maps.googleapis.com/maps/api/js?key=API KEY&signed_in=true&callback=initMap"
        async defer>
    </script>
  </body>
</html>

I show you the error message below.

回答1:

The error says it all. http and https protocols don't match. Try my procedure on how to runs these Map samples successfully. I am able to test every Map JS sample thanks to my local server.

How to Run Any Google Map JS Sample in Local Environment

Make sure you have Python installed in your computer.
Run this command in your terminal :

python -m SimpleHTTPServer 8000

'Serving HTTP on 0.0.0.0 port 8000 ...' means you're local server is ready.
Go to Google Developer Console. Register http://localhost:8000 as URL origin under the same API key credentials you're using. (It'll take at least 5 mins to take effect)
Run your google map file like http://localhost:8000/geolocation.html in the omnibox/address bar.

Hope this helps.

回答2:

I think you are using a Google Chrome Browser version 50 or higher than that . And also you are trying to invoke the code from an HTTP url ,i.e http://192.168.33.10 . Google has removed access of Geo Location API from a non-secure resource since April 20 , 2016 starting from Chrome version 50.0 .So if you want to execute that code , your url should be https . Still, if you just want to test your code on the Chrome Browser for time being , use a Chrome Browser version less than 50.0 ,it should work fine for you. Here is the link to Google notification that announced this change https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only?hl=en . Please let me know if that helps you :)

来源：https://stackoverflow.com/questions/38036222/google-api-geolocation-sample-security-error

标签

javascript

google-maps

google-maps-api-3