Tema: Usando API de google maps para geolocalizacion
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/01/2013, 09:26
txemaarbulo
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Usando API de google maps para geolocalizacion
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 original
  1. var mapa = document.getElementById("mapa");
  2.   mapa.innerHTML = "<img src="+ image_url +">";
y en el <body> creas el div "mapa
Código HTML: 
Ver original
  1. <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
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  5. <title>Mi mapa</title>
  6. <script language="javascript"> 
  7. var intevalo = setInterval('obtener_localizacion()',10000);
  8. function obtener_localizacion() {
  9.   if (navigator.geolocation) {
  10.         navigator.geolocation.getCurrentPosition(mostrar_mapa,gestiona_errores);
  11.   }else{
  12.     alert('Tu navegador no soporta la API de geolocalizacion');  
  13.   }
  14. }
  15. function mostrar_mapa(position) {
  16.   var latitud = position.coords.latitude;
  17.   var longitud = position.coords.longitude;
  18.   var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + latitud + "," +
  19.                     longitud + "&zoom=14&size=300x400&markers=color:red|label:P|" +
  20.                     latitud + ',' + longitud;
  21.   var mapa = document.getElementById("mapa");
  22.   mapa.innerHTML = "<img src="+ image_url +">";
  23. }
  24. function gestiona_errores(err) {
  25.   if (error.core == error.PERMISSION_DENIED) {
  26.     alert("El usuario no ha concedido los privilegios de geolocalización");
  27.   } else if (error.core == error.POSITION_UNAVAILABLE) {
  28.     alert("Posicion no disponible");
  29.   } else if (error.core == error.TIMEOUT) {
  30.     alert("Demasiado tiempo intentando obtener la localización del usuario.");
  31.   } else if (error.core == error.UNKNOWN) {
  32.     alert("Error desconocido");
  33.   } else {
  34.     alert("Error insesperado");
  35.   }
  36. } 
  37. </script>
  38. <!--<meta http-equiv="refresh" content="30">-->
  39. </head>
  40. <body onload="javascript:obtener_localizacion();">
  41. <p><a href="javascript:obtener_localizacion();">Mostrar Posición</a></p>
  42. <div id="mapa"></div>
  43. </body>
  44. </html>
Pueden existir otras formas de corrección del código.