0

Tengo el código para mostrar y guardar en variables las coordenadas de mi ubicación actual pero al momento de realizar la ejecución del botón este no me muestra el mapa y no encuentro cual sera el problema. He buscado mucho el error y aun no se como arreglarlo

<html>
<head>
    <title>Geolocalizacion</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <button onclick="findMe()">Mostrar Ubicacion</button>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPKfClfo7suCHpbPsV5irfHS3wEzrjH5Y&callback=initMap"></script>
    <script>
        function findMe(){
            var output = document.getElementById('map');
            if(navigator.geolocation){
                output.innerHTML = "<p>Soporta geo</p>"
            }else{
                output.innerHTML = "<p>No soporta</p>"
            }
            function localizacion(posicion){
                var latitude = posicion.coords.latitude;
                var longitude = posicion.coords.longitude;

                var imgURL = "https://maps.googleapis.com/maps/api/staticmap?center="+latitude+","+longitude+"&size=600x300&markers=color:red%7C"+latitude+","+longitude+"&key=AIzaSyCPKfClfo7suCHpbPsV5irfHS3wEzrjH5Y";


                output.innerHTML = " <img src ='"+imgURL+"'>";

            }
            function error(){
                output.innerHTML = "<p>No se pudo obtenet la localizacion</p>";
            }

            navigator.geolocation.getCurrentPosition(localizacion,error);
        }
    </script>
</body>

1 respuesta 1

1

Hola link de la información de google maps y un ejemplo muy completo y similar al tu código, el primer fallo en tú código es que no agregaste los atributos async y defer para cargar el script en paralelo al analisis del DOM, lo cual lleva a que el script de google mas arroje algunos errores, otro fallo no declaraste la función initMap, la cual es esencial para inicializar google maps. ¡Suerte!, espero que te ayude en algo esta información.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.