Hola amigos del Hacker.NET
Estaba practicando el tema de la Geolocalizacion con la API de Google maps y me surgieron dudas y un par de errores.
El primero es con respecto a la clave que me dan para poder usar el api en mi proyecto.
me surge el siguiente error en la consola de Mozilla:
Google Maps javascript API error: DeletedApiProjectMapError
https://developers.google.com/maps/documentation/javascript/error-messages#deleted-api-project-map-error.
al obtener una nueva clave e insertarla en mi codigo, el error se solventa pero al poco tiempo me vuelve a fallar, ¿tiene que ver con el hecho de no tener un plan de paga con la api de google maps?, ¿como podria hacer que la geolocalizacion del usuario siempre este ahi sin tener que estar cambiando la clave de la api a cada rato?.
por lo que entiendo de ese error es que la clave anterior se borra y por ello deboi generar una nueva.
Mi otra duda es la siguiente, al consultar en la consola me aparece esta advertencia:
Error de mapa de fuente: TypeError: NetworkError when attempting to fetch resource.
URL del recurso: moz-extension://b1652334-ffa5-4abf-94b3-dd1b7520bdec/js/logger.js
URL del mapa de fuente: logger.js.map.
aqui sucede lo siguiente, al solventar el error poniendo la nueva clave de API, se muestra el mapa, pero solo por unos segundos luego me tira un error de google maps en la pantalla que dice lo siguiente:
Esta página no cargó bien Google Maps. Consulta la consola de javascript para obtener los detalles técnicos.
al ver la consola, me aparece la advertencia de Error de mapa fuente y el siguiente
error:
Fallo al ejecutar 'postMessage' en 'DOMWindow': el origen del destino proporcionando ('null') no coincide con el origen de la ventana del destinatario ('null').
Este ultimo problema esta desde que intente correr cualquier script en el navegador
en otros codigos no parece hacer ningun daño pero lo coloco por si acaso.
El codigo lo tome justo de la pagina de google maps platform, lo he estado estudiando
luego queria hacer un programa para que le diga al usuario su localizacion con un mapa interactivo, pero aun tengo el inconveniente de la clave de la API y del hecho de que aunque ponga una nueva clave, el mapa solo se muestra unos segundos y luego falla y me lanza el error de google maps que comente anterior mente, por si acaso, dejare el codigo de todos modos, agradeceria si alguien podria ayudarme a aclararme eso, soy nuevo en el tema de programacion web asi que estas son cosas que no tengo muy claras aun.
Estaba practicando el tema de la Geolocalizacion con la API de Google maps y me surgieron dudas y un par de errores.
El primero es con respecto a la clave que me dan para poder usar el api en mi proyecto.
me surge el siguiente error en la consola de Mozilla:
Google Maps javascript API error: DeletedApiProjectMapError
https://developers.google.com/maps/documentation/javascript/error-messages#deleted-api-project-map-error.
al obtener una nueva clave e insertarla en mi codigo, el error se solventa pero al poco tiempo me vuelve a fallar, ¿tiene que ver con el hecho de no tener un plan de paga con la api de google maps?, ¿como podria hacer que la geolocalizacion del usuario siempre este ahi sin tener que estar cambiando la clave de la api a cada rato?.
por lo que entiendo de ese error es que la clave anterior se borra y por ello deboi generar una nueva.
Mi otra duda es la siguiente, al consultar en la consola me aparece esta advertencia:
Error de mapa de fuente: TypeError: NetworkError when attempting to fetch resource.
URL del recurso: moz-extension://b1652334-ffa5-4abf-94b3-dd1b7520bdec/js/logger.js
URL del mapa de fuente: logger.js.map.
aqui sucede lo siguiente, al solventar el error poniendo la nueva clave de API, se muestra el mapa, pero solo por unos segundos luego me tira un error de google maps en la pantalla que dice lo siguiente:
Esta página no cargó bien Google Maps. Consulta la consola de javascript para obtener los detalles técnicos.
al ver la consola, me aparece la advertencia de Error de mapa fuente y el siguiente
error:
Fallo al ejecutar 'postMessage' en 'DOMWindow': el origen del destino proporcionando ('null') no coincide con el origen de la ventana del destinatario ('null').
Este ultimo problema esta desde que intente correr cualquier script en el navegador
en otros codigos no parece hacer ningun daño pero lo coloco por si acaso.
El codigo lo tome justo de la pagina de google maps platform, lo he estado estudiando
luego queria hacer un programa para que le diga al usuario su localizacion con un mapa interactivo, pero aun tengo el inconveniente de la clave de la API y del hecho de que aunque ponga una nueva clave, el mapa solo se muestra unos segundos y luego falla y me lanza el error de google maps que comente anterior mente, por si acaso, dejare el codigo de todos modos, agradeceria si alguien podria ayudarme a aclararme eso, soy nuevo en el tema de programacion web asi que estas son cosas que no tengo muy claras aun.
Código (javascript) [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
width: 500px;
margin:auto;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDEr7aH8Aa32ZXev3ipIlxlcq-1Jak0oU&callback=initMap">
</script>
</body>
</html>
