google api geolocation sample security error

Question

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.

enter image description here

Saurabh Chaturvedi · Answer 1 · 2016-06-30T14:38:00.100

0

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 :)

edited Jun 30 '16 at 14:38

answered Jun 26 '16 at 07:55

Saurabh Chaturvedi

2,028
2
18
39

Thank you for your help. I tried it like you said, but i could not be permitted to open the site for the security. My friend uses a Google Chrome Browser version 51, and he can access it. – 駿松井 Jun 30 '16 at 14:06
your friend could access it because may be he was hitting the url from localhost . Google does not consider "localhost" as unsecure. But since your url was like http://192.168.33.10 i thought you don't want to hit from localhost . I'm attaching snapshot of this statement from google's documentation in my updated answer. – Saurabh Chaturvedi Jun 30 '16 at 14:35

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

google api geolocation sample security error

2 Answers2

Linked