Usando API de google maps para geolocalizacion

franjgg · #1 (**permalink**) 09/01/2013, 05:35

Hola como estais amigos,

Vereis estoy usando la api de Google maps hacer una geolocalizacion y funciona bien, lo que pasa es que me gustaria que refrescase las coordenadas cada x segundos, tal y como esta el codigo funciona pero no se por que en lugar de refrescar el mapa que muestra coloca otro mapa al lado con las nuevas coordenadas osea que cada vez que refresca coloca un mapa mas con lo que al final tenemos el navegador lleno de mapas.

A ver si alguien sabe como podriamos solucionar esto

Este es el codigo:;

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<title></title>
<!--<meta http-equiv="refresh" content="30">-->
</head>
<body onload="javascript:obtener_localizacion();">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript">
 
var intevalo = setInterval('obtener_localizacion()',1000);
 
function obtener_localizacion() {
  if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(mostrar_mapa,gestiona_errores);
  }else{
    alert('Tu navegador no soporta la API de geolocalizacion');  
  }
}
function mostrar_mapa(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + latitud + "," +
                    longitud + "&zoom=14&size=300x400&markers=color:red|label:P|" +
                    latitud + ',' + longitud;
    $(document.body).append(
        $(document.createElement("img")).attr("src", image_url).attr('id','map')
    );
 
}
function gestiona_errores(err) {
  if (err.code == 0) {
    alert("error desconocido");
  }
  if (err.code == 1) {
    alert("El usuario no ha compartido su posicion");
  }
  if (err.code == 2) {
    alert("no se puede obtener la posicion actual");
  }
  if (err.code == 3) {
    alert("timeout recibiendo la posicion");
  }
}
 
</script>
<p><a href="javascript:obtener_localizacion();">Mostrar Posici&oacute;n</a></p>
</body>
</html>

Como podeis ver lo que hago es llama a la funcion que obtiene las cordenadas cada x segundos, y la funcion mostrar_mapa lo que esta haciendo es crear una imagen con la localizacion, se podria poner un style en esta funcion y que cada vez que crease una imagen con position:absolute; y top:100; por ejemplo las colocase una encima de otra asi solo se veria la ulitma localizacion.

A ver si alguien sabe

Bueno un saludo

#2 (**permalink**) 09/01/2013, 09:26

franjgg:

Al crear el elemento lo haces cada vez que solicitas obtener_localizacion() sin borrar el anterior, por lo que te crea mapas sucesivos.

Algo sencillo (incluso prescindiendo de jQuery) puede ser esto:

Código Javascript:

Ver originalvar mapa = document.getElementById("mapa");
  mapa.innerHTML = "<img src="+ image_url +">";

y en el <body> creas el div "mapa

Código HTML:

Ver original<div id="mapa"></div>

Con alguna pequeña modificación (declaración de caracteres, el script en el <head> y otra forma de definición de errores) el código de la página puede ser este:

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Mi mapa</title>
<script language="javascript"> 
var intevalo = setInterval('obtener_localizacion()',10000);
function obtener_localizacion() {
  if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(mostrar_mapa,gestiona_errores);
  }else{
    alert('Tu navegador no soporta la API de geolocalizacion');  
  }
}
function mostrar_mapa(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + latitud + "," +
                    longitud + "&zoom=14&size=300x400&markers=color:red|label:P|" +
                    latitud + ',' + longitud;
  var mapa = document.getElementById("mapa");
  mapa.innerHTML = "<img src="+ image_url +">";
}
function gestiona_errores(err) {
  if (error.core == error.PERMISSION_DENIED) {
    alert("El usuario no ha concedido los privilegios de geolocalización");
  } else if (error.core == error.POSITION_UNAVAILABLE) {
    alert("Posicion no disponible");
  } else if (error.core == error.TIMEOUT) {
    alert("Demasiado tiempo intentando obtener la localización del usuario.");
  } else if (error.core == error.UNKNOWN) {
    alert("Error desconocido");
  } else {
    alert("Error insesperado");
  }
} 
</script>
<!--<meta http-equiv="refresh" content="30">-->
</head>
<body onload="javascript:obtener_localizacion();">
<p><a href="javascript:obtener_localizacion();">Mostrar Posición</a></p>
<div id="mapa"></div>
</body>
</html>

Pueden existir otras formas de corrección del código.

franjgg · #3 (**permalink**) 09/01/2013, 09:37

Hola amigo, gracias por tu respuesta

Acabo de probar las modificaciones pero en este caso ahora parece que no funciona, en lugar del mapa muestra una imgen que parece de google maps para mostrar errores y tal.

Parece que no soporta la modificacion o hay algo que se me escapa

Un saludo y muchas gracias amigo

#4 (**permalink**) 09/01/2013, 09:52

Si pasa a los errores es porque no admite la geolocalización.

Yo lo he probado ahora mismo en Firefox 17.0.1 e Explorer 9

De hecho estas usando una imagen de Google Maps, no su API (no estamos construyendo el mapa sino que estamos pasando la imagen

Código HTML:

Ver original"http://maps.google.com/maps/api/staticmap?sensor=false&center=" + latitud + "," +
                    longitud + "&zoom=14&size=300x400&markers=color:red|label:P|"

donde los valores de latitud y longitud varían de acuerdo a la ubicación del usuario (geolocalización de W3C http://dev.w3.org/geo/api/spec-source.html)

Por cierto (un lapsus por mi parte), para que valide la etiqueta, mejor si cambias

Código Javascript:

Ver originalmapa.innerHTML = "<img src="+ image_url +" alt="mapa" />";