<!DOCTYPE html>
<html>
    <head>
        <title>Geolocalizacion</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="area-google">
            <div><h2>Pide jala permisos de hubicacion por google api</h2></div>
            <div><button id="pedirgoogle">Pedir permisos geolocalizacion google</button></div>
            <div>por api</div>
            <div id="alat"></div>
            <div id="alon"></div>
            <div id="gres"></div>
        </div>
    </body>

    <script>
        $(document).ready(function () {
            //Al hacer click en el boton 
            $("#pedirgoogle").click(function () {
                $.ajax({
                    type: 'POST',
                    data: '',
url: "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyCbj3Nos4pXqskQ01cznbJ6BeDQ3q7v_9w",
                    success: function (result) {
                        $('#alat').html(result['location']['lat']);
                        $('#alon').html(result['location']['lng']);
                        //$('#gres').html(JSON.stringify(result));
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        window.alert("error");
                    }
                });
            });

    </script>


</html>