OTROS/geoposition/google_maps.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Geolocation con Google Maps</title>
        <style type="text/css">
            #mapa {
                width: 100%; 
                height: 300px;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="mapa"></div>
        <div id="datos"></div>
        <a id="recarga" href="#">Recargar!</a>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=---key----"></script>
        <script type="text/javascript">
        
        ((() => {
            // Google Maps        
            google.maps.visualRefresh = true; // Refresco Constante
        
            let map;
        
            function initialize() {
                const mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('mapa'),
                    mapOptions);
                // Try HTML5 geolocation
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(position => {
                        const pos = new google.maps.LatLng(position.coords.latitude,
                            position.coords.longitude);
                        const infowindow = new google.maps.InfoWindow({
                            map,
                            position: pos,
                            content: 'Te pille! :-)'
                        });
                        map.setCenter(pos);
        
        
                        //datos Primer Arranque
                        muestraDatos(x, position);
        
        
                    }, () => {
                        handleNoGeolocation(true);
                    });
                } else {
                    // Browser doesn't support Geolocation
                    handleNoGeolocation(false);
                }
            }
        
            function handleNoGeolocation(errorFlag) {
                const options = {
                    map,
                    position: new google.maps.LatLng(60, 105),
                    content: errorFlag ? 'Error: El Servicio de Geolocalización esta fallando.' : 'Error: Tu navegador no soporta la Geolocalización.' 
                };
        
                const infowindow = new google.maps.InfoWindow(options);
                map.setCenter(options.position);
            }
        
            google.maps.event.addDomListener(window, 'load', initialize);
        
        
            // Datos (Core)
        
            var x = document.getElementById("datos");
            const a = document.getElementById("recarga");
        
            function muestraDatos(div, position) {
                x.innerHTML = `Latitud: ${position.coords.latitude}<br>Longitud: ${position.coords.longitude}<br>Precisión: ${position.coords.accuracy}<br>Altitud: ${position.coords.altitude}<br>Altitud Precisa: ${position.coords.altitudeAccuracy}<br>Grados Norte: ${position.coords.heading}<br>Velocidad m/s: ${position.coords.speed}<br>Última Conexión: ${position.timestamp}`;
            }
        
        
            //datos Actualizacion
            a.onclick = (e) => {
                initialize();
                e.preventDefault();
            };
        
        
        }))();

        </script>
    </body>
</html>