Foros del Web - Ver Mensaje Individual - 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