1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda problema con geolocalizacion en javascript

Tema en 'Javascript' comenzado por naxyam, 25 de Agosto de 2017.

  1. naxyam

    naxyam Nuevo Miembro

    Se incorporó:
    3 de Agosto de 2017
    Mensajes:
    3
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Mujer
    Hola amigos, soy nueva con javaScript y estoy haciendo un programa que utiliza la funcion de geolocalización en el objeto navigator, pero me saca un error cuando debe crear el mapa con la clave que da google maps, es como si no reconociera la clave, y ya prove y es una clave válida, les voy a pegar mi código para que me ayuden:
    este es el html:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Geolocation API</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="materialize/css/materialize.min.css">
    <link rel="stylesheet" href="index.css">
    </head>
    <body>
    <h1>Localización: </h1>
    <a class="waves-effect waves-light btn red" id="btn-geo">Localizate en el mapa!</a>
    <div class="card" id="map-container">
    <section id="map"></section>
    </div>



    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
    <script src="materialize/js/materialize.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwC_8cZ2Wrv_2APqvmLwzHybR2CcR2_wE&signed_in=true"
    async defer>
    </script>
    <script src="index.js"></script>
    </body>
    </html>

    CSS:
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    #map-container {
    margin: 5vh auto;
    width: 90%;
    height: 70%;
    }

    #map {
    width: 100%;
    height: 100%;
    }
    javaScript
    var map, infoWindow, pos;

    if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
    pos={
    lat: position.coords.latitude,
    lng: position.coords.longitude
    }
    initMap()
    })
    }else{
    alert("Tu navegador no soporta la geolocalización")
    }

    function initMap(){
    var mapContainer = document.getElementById("map")
    var config = {
    center:{ lat:-34.397, lng: 150.644},
    zoom: 5

    }
    map = new google.maps.Map(mapContainer, config)
    infoWindow = new google.maps.infoWindow({map: map})
    }

    var button = document.getElementById("btn-geo");
    button.addEventListener("click", function(){
    alert("Se buscará su posición en el mapa")
    map.setCenter(pos)
    map.setZoom(15)
    infoWindow.setPosition(pos)
    infoWindow.setContent("Ubicación encontrada")
    })

    Se supone que debería cargar un mapa de google maps y localizar mi posición actual en el mapa, pero no carga el mapa, los que me puedan ayudar, se los agradezco mucho.
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.462
    Me gusta recibidos:
    673
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:

Comparte esta página