javascript - Http sites does not detect the location in Chrome - issue

Question

We did notice today an issue in automatic detection of zip code based on the user s location. it worked well in other browsers(edge, IE, Firefox) We had to configure the sites to https and then it works ok

Example : https://www.whatismyzip.com/ works well where as http://www.mapdevelopers.com/what-is-my-zip-code.php does'nt work.

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAdGQKI4sEj5TZAjNCds422V_ZHevD45Fo"></script>
 <%--   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>--%>

 <%--     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>--%>
    <script type="text/javascript">


        function ShowMessages() {

            debugger;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success);
            } else {
                alert("Geo Location is not supported on your current browser!");
            }
            function success(position) {
                debugger;
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                var latlng = new google.maps.LatLng(lat, lng);
                var geocoder = geocoder = new google.maps.Geocoder();
                geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[1]) {

                            var searchAddressComponents = results[0].address_components,
                             searchPostalCode = "";
                            $.each(searchAddressComponents, function () {
                                if (this.types[0] == "postal_code") {
                                    searchPostalCode = this.short_name;
                                }
                            });

                            document.getElementById('hidden1').value = searchPostalCode
                            __doPostBack('', '');


                        }
                    }
                });
            }

        }

Any help/workaround would be appreciated.

EDIT: Other than Google API, are there any other working alternatives?

Answer 1

You cannot use the HTML5 Geolocation API with non-secure connections as per below:

Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.

However, it is possible to use the Google Maps Geolocation API or GeoIP, and possibly others, though it is not recommended in the long term. See below:

There are a number of fallback options available to get a user’s location that are not affected by this change, such as Google Maps Geolocation API, GeoIP (as an example, there are other geo based solutions), and a user-entered zip code. However, we strongly recommend that the best path to ensure ongoing access to geolocation is to move to HTTPS.

Source: Geolocation API removed from unsecured origins in Chrome 50