unable to get geolocation using javascript from the server

I am facing an issue in which I am unable to get the location coordinates. I am using javascript and trying to get the coordinates using geolocation. By the ways, I am able to get the location using the same script on localhost but unable to get the coordinates when I upload the script on server and then trying to get the location coordinates. The code is as follows:

<html>
<head>
    <title>test coordinates</title>

    <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous" />

    <!-- Optional theme -->
    <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
        integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
        crossorigin="anonymous">

    <script type="text/javascript"
        src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>

    <script>
    jQuery(document).ready(function() {
        $("#btnSubmit").click(function() {
            initGeolocation();
        });
    });

    function initGeolocation() {
        if (navigator.geolocation) {
            // Call getCurrentPosition with success and failure callbacks
            navigator.geolocation.getCurrentPosition(success, fail);
        } else {
            alert("Sorry, your browser does not support geolocation services.");
        }
    }

    function success(position) {
        alert("longitude is = "+position.coords.longitude);
        alert("latitude  is = "+position.coords.latitude);
    }

    function fail() {
        alert("Sorry, Could not obtain location.");
    }

</script>

</head>
<body>

    <button type="button" class="btn btn-default" id="btnSubmit">Submit
            Task</button>

</body>
</html>

Any help and suggestion would be highly appreciated.

Thanks,

Solution

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. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.

You can consider free HTTPS from CloudFlare.