JavaScript - hacer que desaparezca un valor de temperatura desactualizado

 
Vista:
sin imagen de perfil

hacer que desaparezca un valor de temperatura desactualizado

Publicado por Toni (8 intervenciones) el 09/01/2018 19:56:31
Hola buenas tardes.
Estoy haciendo sobre un mapa de google los datos de temperatura de varias estaciones meteorologicas, en que sobre el mapa se muestran las temperaturas actualizadas cada x minutos.
Resulta que mientras se van actualizando va todo perfecto, el problema que veo es que si alguna de las estaciones por el problema qe sea no actualiza datos en el mapa siguen apareciendo los datos desactualizados.
Por ejemplo si a las 12 del mediodia habian 15º en el mapa aparecen 15º, pero si el ordenador se ha parado y la estacion no actualiza datos en el mapa siguen apareciendo esos 15º.
Lo que yo busco es el modo de hacer que si esos datos no se actualizan que el dato desaparezca del mapa y no vuelva a aparecer hasta que no vuelva a actualizar.
Se que hay varios mapa online que lo hacen, pero no se el modo.
Este es el enlace a un mapa que estoy haciendo donde aparecen los datos: www.meteoxabia.com/mapa2.html
Muchas gracias, si necesitan alguna cosa diganme que es lo que les hace falta.
Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer que desaparezca un valor de temperatura desactualizado

Publicado por txema (23 intervenciones) el 10/01/2018 01:44:44
Hola Toni:

Lo que tienes que hacer es una comparación entre la fecha que recibes de la página de datos con la hora actual a menos que dicha hora la estés escribiendo del enlace dado vía GET (URL+'?buster='+new Date().getTime();)

Un script sencillo para comparar las dos fechas en milisegundos puede ser:
1
2
3
4
5
6
7
8
hora_actual = new Date().getTime();
hora_datos = new Date('01/10/18 00:00').getTime(); // sería la feha/hora de datos recibidos mes/día/año ...
var diferencia = hora_actual - hora_datos; // dada en milisegundos
if (diferencia > 3600000) {
  alert('la diferencia es mayor a una hora');
} else {
  alert('la diferencia es menor a una hora');
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

hacer que desaparezca un valor de temperatura desactualizado

Publicado por Toni (8 intervenciones) el 10/01/2018 14:07:12
Buenas tardes Txema
Muchas gracias por tu respuesta
No soy muy entendido en el tema y a lo mejor algo no hago bien, o no lo coloco en su debido sitio.
El caso es que me aparece "la diferencia es mayor a 1 hora " y no aparece el mapa, como yo actualizo cada 5 minutos los datos, he cambiado la hora por los 5 mintuos, pero lo mismo.
Te adjunto como lo tengo antes de poner el script que me has dejado tu
Te dejo una parte donde supongo que entre alguna de esas lineas deberia ir:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function getEstacio(URL,map,x,callback){
    // read text from URL location
    var request = new XMLHttpRequest();
	var URLajax = URL+'?buster='+new Date().getTime();
    request.open('GET', URLajax, true);
    request.send(null);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            realtime = request.responseText;
            realtime=realtime.split(" ");
 
			if(realtime[1]=="") Marker(realtime[3].split("°C")[0],map,x); else                                 Marker(realtime[2].split("°C")[0],map,x);
 
			callback();
        }
    }
 
}
 
var x=0;
 
var getText = function(arr,map) {
    getEstacio(URL[x],map,x,function(){
        // set x to next item
		console.log(x);
        x++;
 
        // any more items in array? continue loop
        if(x < arr.length) {
             getText(arr,map);
        }
    });
}
 
function getRealtime(){
 
	console.log("getRealtime");
	map = initMap();
	console.log("Map: "+map);
	getText(URL,map);
}
 
function initMap() {
 
	console.log("initMap");
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer que desaparezca un valor de temperatura desactualizado

Publicado por txema (23 intervenciones) el 10/01/2018 21:05:17
Hola Toni:

Efectivamente, no te había comentado bien lo de las horas y, generalmente respondemos de memoria que ... falla.

Lo he probado y creo que ahora estará bien.

- Recibes los datos (si no me equivoco) así: 10/01/18 20:18 13.1 ... donde después de la hora aparecen temperatura y los demás datos

1.- Tenemos que unificar la presentación de ambas horas. Y, también aquí parece que me equivoqué.
Comenzamos por ello a unificar la hora recibida con la actual. No veo muy claro dónde recoges la hora de la página de datos.
Así que donde pongo fecha lo sustituyes por la variable correspondiente.
A la fecha recibida nos da el año como 18 en vez de 2018. Así que, aunque lo complico un poco más para ver cómo lo pauto, sería
1
2
3
4
5
6
7
var fecha= '01/10/18 20:35'; //fentrada(var fecha); 
var dia = fecha.substr(0, 2);
var mes = fecha.substr(3, 2);
var anno = fecha.substr(6, 2);
var hora = fecha.substr(9, 5);
var hora_datos = new Date(dia+'/'+mes+'/20'+anno+' '+hora);
alert(hora_datos);
nos aparecerá en el alert Wed Jan 10 2018 20:35:00 GMT+0100, que se asemeja a lo que muestra como hora actual (Wed Jan 10 2018 20:42:08 GMT+0100 en estos momentos)

Pasadas las fechas a milisegundos las tendremos listas para comparar.
1
2
3
4
5
6
7
8
9
10
11
12
13
var fecha= '01/10/18 20:35'; //fentrada(var fecha); 
var dia = fecha.substr(0, 2);
var mes = fecha.substr(3, 2);
var anno = fecha.substr(6, 2);
var hora = fecha.substr(9, 5);
var hora_datos = new Date(dia+'/'+mes+'/20'+anno+' '+hora).getTime();
var hora_actual = new Date().getTime();
var diferencia = hora_actual - hora_datos; // dada en milisegundos
if (diferencia > 360000) { // Lo he reducido a 6 minutos
  alert('la diferencia es mayor a 6 mn. y no muestro el marcador');
} else {
  alert('la diferencia es menor a 6 mn y muestro el marcador');
}
Ya prácticamente tenemos todo listo.

El código lo insertaremos en function Marker(temperatura, map, x) donde lanzas los marcadores. Creo que sería aquí:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
function Marker(temperatura, map, x) {
 
    console.log("Marker" + " Temperatura: " + temperatura + "X: " + x);
 
    var fecha = '01/10/18 20:35'; //fentrada(var fecha); 
    var dia = fecha.substr(0, 2);
    var mes = fecha.substr(3, 2);
    var anno = fecha.substr(6, 2);
    var hora = fecha.substr(9, 5);
    var hora_datos = new Date(dia + '/' + mes + '/20' + anno + ' ' + hora).getTime();
    var hora_actual = new Date().getTime();
    var diferencia = hora_actual - hora_datos; // dada en milisegundos
    if (diferencia > 360000) { // Lo he reducido a 6 minutos
        alert('la diferencia es mayor a 6 mn. y no muestro el marcador');
        titleport = '';
        iconport = '';
        titlebarranquera = '';
        iconbarranquera = '';
        titlelluca = '';
        iconlluca = '';
        titlecastellans = '';
        iconcastellans = '';
        titletosalgros = '';
        icontosalgros = '';
        titlecapnao = '';
        iconcapnao = '';
        titlepoble = '';
        iconpoble = '';
        titleclubdegolf = '';
        iconclubdegolf = '';
        titlejulians = '';
        iconjulians = '';
 
    } else {
        alert('la diferencia es menor a 6 mn y muestro el marcador');
        titleport = 'Port - Temperatura actual: ' + temperatura;
        iconport = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titlefreginal = 'Freginal - Temperatura actual: ' + temperatura;
        iconfreginal = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titlebarranquera = 'Barranquera - Temperatura actual: ' + temperatura;
        iconbarranquera = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titlelluca = 'Lluca - Temperatura actual: ' + temperatura;
        iconlluca = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titlecastellans = 'Castellans - Temperatura actual: ' + temperatura;
        iconcastellans = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titletosalgros = 'Tossal Gros - Temperatura actual: ' + temperatura;
        icontosalgros = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titlecapnao = 'Cap de la Nao - Temperatura actual: ' + temperatura;
        iconcapnao = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titlepoble = 'Xàbia - Temperatura actual: ' + temperatura;
        iconpoble = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titleclubdegolf = 'Xàbia - Temperatura actual: ' + temperatura;
        iconclubdegolf = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
        titlejulians = 'Xàbia - Temperatura actual: ' + temperatura;
        iconjulians = 'http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png';
 
    }
 
    //////// Y seguiríamos con el código normal.
    // Tan solo ocultamos los iconos / marker	 
    new google.maps.Marker({
        position: positions[x],
        map: map,
        title: titleport,
        icon: iconport,
        title: titlefreginal,
        icon: iconfreginal,
        title: titlebarranquera,
        icon: iconbarranquera,
        title: titlelluca,
        icon: iconlluca,
        title: titlecastellans,
        icon: iconcastellans,
        title: titletosalgros,
        icon: icontosalgros,
        title: titlecapnao,
        icon: iconcapnao,
        title: titlepoble,
        icon: iconpoble,
        title: titleclubdegolf,
        icon: iconclubdegolf,
        title: titlejulians,
        icon: iconjulians,
    });
 
}

P.D. Si bien llavo algunos años trabajando en mapas, no termino de entender bien el código, que veo lo tienes importado (comentarios en ingles ¿!). Yo trabajo este tipo de mapas en jQuery e importando los datos en JSON, generalmente transformados desde texto, excel, xml, ... mediante php.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

hacer que desaparezca un valor de temperatura desactualizado

Publicado por Toni (8 intervenciones) el 10/01/2018 21:55:02
Gracias Txema de nuevo!
Los datos los cojo de esta plantilla:
www.meteoxabia.com/estacions/port/mapa.htm
que queda así:
10/01/18 21:50 13.4 58 5.3 0.0 48.3 360 0.0 1.6 1015.6 N 1.6 km/h °C hPa mm 48.3 Estable 1.6 1.6 1.6 20.4 48 13.4 20.4 17.6 9.4 5:01 48.3 14:24
Por ejemple la variables estan separadas por espacio, por ejemplo la temperatura es la variable 3, la humedad es la 4, así sucesivamente.
La fecha es la 1 y la hora es la 2
así por ejemplo la temperatura es getrealtime [3]
pero no se si para poner la fecha debo poner igual getrealtime [1]

Algo estoy haciendo mal porque no me aparece el mapa

Este es el código completo que tengo ahora, por si te sirve:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="refresh" content="300">
  <title>Mapa METEOXÀBIA</title>
    <style>
       #map {
        height: 660px;
        width: 1110px
       }
    </style>
  </head>
  <body>
 
    <div id="map"></div>
 
    <script>
 
	var URL = ["./estacions/port/mapa.htm","./estacions/freginal/mapa.htm","./estacions/valls/mapa.htm","./estacions/lluca/wx11.html","./estacions/castellans/mapa.htm","./estacions/tosalgros/mapa.htm","./estacions/capnao/wx11.html","./estacions/poble/wx11.html","./estacions/clubdegolf/mapa.htm","./estacions/julians/wx11.html"];
 
 
	var positions = [{lat:38.793625,lng:0.180238},{lat:38.783567,lng:0.166269},{lat:38.783402,lng:0.129075},{lat: 38.761589,lng:0.148581},{lat:38.794598,lng:0.151655},{lat:38.749933,lng:0.119593},{lat:38.739241,lng:0.220552},{lat:38.790208,lng:0.162747},{lat:38.747097,lng:0.150225},{lat:38.777568,lng:0.110755}];
	var temperatures = new Array();
 
	function getEstacio(URL,map,x,callback){
    // read text from URL location
    var request = new XMLHttpRequest();
	var URLajax = URL+'?buster='+new Date().getTime();
    request.open('GET', URLajax, true);
    request.send(null);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            realtime = request.responseText;
            realtime=realtime.split(" ");
 
 
			if(realtime[1]=="") Marker(realtime[3].split("&deg;C")[0],map,x); else                                 Marker(realtime[2].split("&deg;C")[0],map,x);
 
			callback();
        }
    }
 
}
 
	var x=0;
 
	var getText = function(arr,map) {
    getEstacio(URL[x],map,x,function(){
        // set x to next item
		console.log(x);
        x++;
 
        // any more items in array? continue loop
        if(x < arr.length) {
            getText(arr,map);
        }
    });
}
 
function getRealtime(){
 
	console.log("getRealtime");
	map = initMap();
	console.log("Map: "+map);
	getText(URL,map);
}
 
function initMap() {
 
 
  console.log("initMap");
 
    var uluru = {lat: (38.7665732+38.773164)/2, lng: (0.050647+0.254409)/2};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: uluru,
	  mapTypeId: 'hybrid'
    });
 
	return map;
 
}
 
 
function Marker(temperatura,map,x){
 
	console.log("Marker"+" Temperatura: "+temperatura+ "X: "+x);
 
	titleport = 'Port - Temperatura actual: ' + temperatura;
	iconport = 'images/numeros/'+Math.round(temperatura)+'.png';
	titlefreginal = 'Freginal - Temperatura actual: ' + temperatura;
	iconfreginal = 'images/numeros/'+Math.round(temperatura)+'.png';
            titlebarranquera = 'Barranquera - Temperatura actual: ' + temperatura;
	iconbarranquera = 'images/numeros/'+Math.round(temperatura)+'.png';
            titlelluca = 'Lluca - Temperatura actual: ' + temperatura;
	iconlluca = 'images/numeros/'+Math.round(temperatura)+'.png';
            titlecastellans = 'Castellans - Temperatura actual: ' + temperatura;
	iconcastellans = 'images/numeros/'+Math.round(temperatura)+'.png';
            titletosalgros = 'Tossal Gros - Temperatura actual: ' + temperatura;
	icontosalgros = 'images/numeros/'+Math.round(temperatura)+'.png';
            titlecapnao = 'Cap de la Nao - Temperatura actual: ' + temperatura;
	iconcapnao = 'images/numeros/'+Math.round(temperatura)+'.png';
            titlepoble = 'Xàbia - Temperatura actual: ' + temperatura;
	iconpoble = 'images/numeros/'+Math.round(temperatura)+'.png';
	titleclubdegolf = 'Xàbia - Temperatura actual: ' + temperatura;
	iconclubdegolf = 'images/numeros/'+Math.round(temperatura)+'.png';
            titlejulians = 'Xàbia - Temperatura actual: ' + temperatura;
	iconjulians = 'images/numeros/'+Math.round(temperatura)+'.png';
 
    new google.maps.Marker({
      position: positions[x],
      map: map,
	  title: titleport,
	  icon: iconport,
              title: titlefreginal,
	  icon: iconfreginal,
              title: titlebarranquera,
	  icon: iconbarranquera,
              title: titlelluca,
	  icon: iconlluca,
              title: titlecastellans,
	  icon: iconcastellans,
              title: titletosalgros,
	  icon: icontosalgros,
              title: titlecapnao,
	  icon: iconcapnao,
              title: titlepoble,
	  icon: iconpoble,
              title: titleclubdegolf,
	  icon: iconclubdegolf,
              title: titlejulians,
	  icon: iconjulians,
    });
 
}
 
 
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZap3eSSlAkY5nEkNrIQrxSzR-xo4Rmrg&callback=getRealtime">
    </script>
  </body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer que desaparezca un valor de temperatura desactualizado

Publicado por txema (23 intervenciones) el 11/01/2018 02:01:17
Hola nuevamente Toni.

He estado haciendo algunas pruebas pero ya de inicio, puedo acceder a los datos que recibes pero no puedo insertarlos en código, que según la consola de errores
Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en http://www.meteoxabia.com/estacions/port/mapa.htm?buster=1515631741885 (razón: falta la cabecera CORS 'Access-Control-Allow-Origin').

Ello con cada una de los diez enlaces.

Como te comentaba al final de mi mensaje anterior, hay varias cosas que no entiendo del código.

Sin poder ayudarte más, lo último propueto era que cambies la función function Marker(temperatura, map, x) a como yo te la exponía, dejando los marcadores pasados de tiempo vacíos (iconport = '';, etc. y para que funcione donde ponía yo var fecha = '01/10/18 20:35'; habría que cambiarl por las variables que tu me indicas (tema que no he podido probar).

Serúa var fecha = getrealtime [1]+' '+getrealtime [2];. Lo demás de la función quedaría igual a como te expuse.
Prueba a ver si te llegan los valores de las variables. De otro modo, habría que hacerlas generales para todo el documento.

Nos comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

hacer que desaparezca un valor de temperatura desactualizado

Publicado por Toni (8 intervenciones) el 11/01/2018 13:46:34
Hola de nuevo Txema, igual te hago perder mucho tiempo con esto, gracias anticipadas por la paciencia.
Los datos de las distintas estaciones estan indicadas las url de donde los recoge en la plantilla, si miras arriba el codigo que te mandé es el la línea 19, ahí estàn todas las url de las distintas estaciones donde recoge los datos.
La temperatura es la variable 3 (primero está la fecha, luego la hora, y luego la temperatura. (en este caso aunque la variable sea la 3, se especifica com 2 porque se le resta un espacio (no me preguntes por que, pero es así). Entonces cada dato de temperaturas de todas las estaciones es la variable 2.
Tambien veo que tu pones la fecha primero el mes luego el dia y en la plantilla de datos está como dia, mes y año.
Es que algo yo creo que no acabo de hacer bien porque no me llega ni aparecer el mapa, me sale la pagina en blanco.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer que desaparezca un valor de temperatura desactualizado

Publicado por txema (23 intervenciones) el 11/01/2018 16:00:35
Hola Toni:

Sí, los datos los he ido recogiendo pero he tenido que crearme 10 archivitos para probarlo en local porque, como te decía, no los reconocía desde código con ruta absoluta..
Si he podido trabajar con tus markers que los he tomado de tu ruta absoluta (http://www.meteoxabia.com/images/numeros/' + Math.round(temperatura) + '.png)

Ha costado un poco pero ya lo tienes, excepto para dos estaciones que te comentaré más adelante

Cambia tu código Javascript por este:
Por cierto, añades después del <head> <meta charset="utf-8"> por la codificación de caracteres.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<script>
var URL = ["http://www.meteoxabia.com/estacions/port/mapa.htm", "http://www.meteoxabia.com/estacions/freginal/mapa.htm", "http://www.meteoxabia.com/estacions/valls/mapa.htm", "http://www.meteoxabia.com/estacions/lluca/wx11.html", "http://www.meteoxabia.com/estacions/castellans/mapa.htm", "http://www.meteoxabia.com/estacions/tosalgros/mapa.htm", "http://www.meteoxabia.com/estacions/capnao/wx11.html", "http://www.meteoxabia.com/estacions/poble/wx11.html", "http://www.meteoxabia.com/estacions/clubdegolf/mapa.htm", "http://www.meteoxabia.com/estacions/julians/wx11.html"];
 
var positions = [{
    lat: 38.793625,
    lng: 0.180238
}, {
    lat: 38.783567,
    lng: 0.166269
}, {
    lat: 38.783402,
    lng: 0.129075
}, {
    lat: 38.761589,
    lng: 0.148581
}, {
    lat: 38.794598,
    lng: 0.151655
}, {
    lat: 38.749933,
    lng: 0.119593
}, {
    lat: 38.739241,
    lng: 0.220552
}, {
    lat: 38.790208,
    lng: 0.162747
}, {
    lat: 38.747097,
    lng: 0.150225
}, {
    lat: 38.777568,
    lng: 0.110755
}];
var temperatures = new Array();
 
function getEstacio(URL, map, x, callback) {
    // read text from URL location
    var request = new XMLHttpRequest();
    request.open('GET', URL, true);
    request.send();
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            realtime = request.responseText;
            realtime = realtime.split(" ");
 
 
            if (realtime[1] == "") Marker(realtime[3].split("&deg;C")[0], map, x);
            else Marker(realtime[2].split("&deg;C")[0], map, x);
 
            callback();
        }
    }
 
}
 
var x = 0;
var getText = function(arr, map) {
    getEstacio(URL[x], map, x, function() {
        // set x to next item
        console.log(x);
        x++;
 
        // any more items in array? continue loop
        if (x < arr.length) {
            getText(arr, map);
        }
    });
}
 
function getRealtime() {
 
    console.log("getRealtime");
    map = initMap();
    console.log("Map: " + map);
    getText(URL, map);
}
 
function initMap() {
 
 
    console.log("initMap");
 
 
    var uluru = {
        lat: (38.7665732 + 38.773164) / 2,
        lng: (0.050647 + 0.254409) / 2
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: uluru,
        mapTypeId: 'hybrid'
    });
 
    return map;
 
}
 
function Marker(temperatura, map, x) {
    temperatura = temperatura.substr(0, 4);
    console.log("Marker" + " Temperatura: " + temperatura + "X: " + x);
 
    var fecha = realtime[0] + ' ' + realtime[1]; //fentrada(var fecha); 
    var dia = fecha.substr(0, 2);
    var mes = fecha.substr(3, 2);
    var anno = fecha.substr(6, 2);
    var hora = fecha.substr(9, 5);
    var hora_datos = new Date(mes + '/' + dia + '/20' + anno + ' ' + hora).getTime();
    var hora_actual = new Date().getTime();
 
    var diferencia = hora_actual - hora_datos; // dada en milisegundos
    if (diferencia > 360000) { // Lo he reducido a 6 minutos
        //    alert('la diferencia es mayor a 6 mn. y no muestro el marcador');
        titleport = '';
        iconport = '';
        titlebarranquera = '';
        iconbarranquera = '';
        titlefreginal = '';
        iconfreginal = '';
        titlelluca = '';
        iconlluca = '';
        titlecastellans = '';
        iconcastellans = '';
        titletosalgros = '';
        icontosalgros = '';
        titlecapnao = '';
        iconcapnao = '';
        titlepoble = '';
        iconpoble = '';
        titleclubdegolf = '';
        iconclubdegolf = '';
        titlejulians = '';
        iconjulians = '';
 
    } else {
        //   alert('la diferencia es menor a 6 mn y muestro el marcador');
        titleport = 'Port - Temperatura actual: ' + temperatura;
        iconport = 'images/numeros/' + Math.round(temperatura) + '.png';
        titlefreginal = 'Freginal - Temperatura actual: ' + temperatura;
        iconfreginal = 'images/numeros/' + Math.round(temperatura) + '.png';
        titlebarranquera = 'Barranquera - Temperatura actual: ' + temperatura;
        iconbarranquera = 'images/numeros/' + Math.round(temperatura) + '.png';
        titlelluca = 'Lluca - Temperatura actual: ' + temperatura;
        iconlluca = 'images/numeros/' + Math.round(temperatura) + '.png';
        titlecastellans = 'Castellans - Temperatura actual: ' + temperatura;
        iconcastellans = 'images/numeros/' + Math.round(temperatura) + '.png';
        titletosalgros = 'Tossal Gros - Temperatura actual: ' + temperatura;
        icontosalgros = 'images/numeros/' + Math.round(temperatura) + '.png';
        titlecapnao = 'Cap de la Nao - Temperatura actual: ' + temperatura;
        iconcapnao = 'images/numeros/' + Math.round(temperatura) + '.png';
        titlepoble = 'Xàbia - Temperatura actual: ' + temperatura;
        iconpoble = 'images/numeros/' + Math.round(temperatura) + '.png';
        titleclubdegolf = 'Xàbia - Temperatura actual: ' + temperatura;
        iconclubdegolf = 'images/numeros/' + Math.round(temperatura) + '.png';
        titlejulians = 'Xàbia - Temperatura actual: ' + temperatura;
        iconjulians = 'images/numeros/' + Math.round(temperatura) + '.png';
 
    }
 
    //////// Y seguiríamos con el código normal.
    // Tan solo ocultamos los iconos / marker que apareen los rojos de Google Maps 
    new google.maps.Marker({
        position: positions[x],
        map: map,
        title: titleport,
        icon: iconport,
        title: titlefreginal,
        icon: iconfreginal,
        title: titlebarranquera,
        icon: iconbarranquera,
        title: titlelluca,
        icon: iconlluca,
        title: titlecastellans,
        icon: iconcastellans,
        title: titletosalgros,
        icon: icontosalgros,
        title: titlecapnao,
        icon: iconcapnao,
        title: titlepoble,
        icon: iconpoble,
        title: titleclubdegolf,
        icon: iconclubdegolf,
        title: titlejulians,
        icon: iconjulians,
    });
 
}
</script>

Te lo he ordenado porque no podía con él.

Las observaciones:
Hay dos estaciones que nos dan la fecha de forma diferente y que al leerla/ordenarla para el if, nos arrojan resultados dispares. Son:
- "http://www.meteoxabia.com/estacions/lluca/wx11.html", // formato fecha 11/1/2018
- "http://www.meteoxabia.com/estacions/tosalgros/mapa.htm", // formato fecha 11/01/2018
El formato que he tomado de referencia es 11/01/18 13:53 que lo transformo a 11/01/2018 13:53

Hay tres estaciones que la temperatura recoge con ªC a diferencia del resto que solo da los número. Por suerte, Math.round(temperatura) lo resuelve

Otros cambios: en línea 62 ha quedado request.open('GET', URL, true);. reemplazando a
1
2
var URLajax = URL+'?buster='+new Date().getTime();
    request.open('GET', URLajax, true);
El GET no hacía ningún servicio y, al menos en local, me impedía la lectura de datos.

Y ya como anécdota, el registyro de fecha lo tomo desde var fecha = realtime[0] + ' ' + realtime[1]; (espacio de por medio para leerlo correctamente.

Pruebalo. Si te falla algo, tendremos que revisar a fondo los archivos que generan los datos. Yo los he probado leyendolos como .tex,

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer que desaparezca un valor de temperatura desactualizado

Publicado por txema (23 intervenciones) el 11/01/2018 16:25:22
Toni, Cmbia URL para hacerlas relativas a tu web
1
var URL = ["./estacions/port/mapa.htm", "./estacions/freginal/mapa.htm", "./estacions/valls/mapa.htm", "./estacions/lluca/wx11.html", "./estacions/castellans/mapa.htm", "./estacions/tosalgros/mapa.htm", "./estacions/capnao/wx11.html", "./estacions/poble/wx11.html", "./estacions/clubdegolf/mapa.htm", "./estacions/julians/wx11.html"];

Las tenía absolutas para mis pruebas (que no me funcionó) pero hazlas relativas en tu código.

Y las estaciones donde lee la temperatura tipo 13,1ªC necesitan corregirse.

Puedes añadir en la línea 110
1
var temperatura = temperatura.substr(0, 4);
Ello toma solo los 4 primeros caracteres y anula ªC (de otro modo, Math.round(temperatura) daría NULL
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

hacer que desaparezca un valor de temperatura desactualizado

Publicado por Toni (8 intervenciones) el 11/01/2018 19:38:00
Hola Txema,
Ya me aparece el mapa y los datos
salen los marcadores de estaciones donde no aparecen datos, será por lo que comentas arriba.
he cambiado la dirección web del mapa para seguir con las pruebas, si quieres mirar es esta www.meteoxabia.com/mapa2pruebas.html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

hacer que desaparezca un valor de temperatura desactualizado

Publicado por Toni (8 intervenciones) el 11/01/2018 21:37:18
Hola de nuevo,
tal vez el intervalo de minutos de desactualizacion sea un poco corto, lo dejaría en 10 minutos.
He hecho la prueba de ver si la que no contiene los "ºC", pero sigue desaparecida esa estación, creo que esa linea que me dices que ponga en la línea 110 no hace nada, hago pruebas cambiando numeros y nada, la que está desaparecida es la plantilla de datos que no contiene los ºC
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer que desaparezca un valor de temperatura desactualizado

Publicado por txema (23 intervenciones) el 11/01/2018 21:47:17
Estoy probándolo

(ltengo que hacerlo manual sobre mis 10 archivos locales para la lectura))

Sí, creo que el tiempo tendrías que alargarlo. Para 10 minutos sería if (diferencia > 3600000)

La que te está fallando corresponde a la lectura original de fecha 11/1/2018 (la adaptación desd .substr le otorga un valor de mes "1/" que carece de sentido.

No sé si te interesa eliminar ese marker discordante rojo de google.

He abierto el chat de esta web en javascript si te interesa.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

hacer que desaparezca un valor de temperatura desactualizado

Publicado por Toni (8 intervenciones) el 11/01/2018 22:17:08
Hola Txema
No se a que te refieres en esto: "No sé si te interesa eliminar ese marker discordante rojo de google."
No se si me interesa o no, si se soluciona por mi si, pero la verdad por ahora no se a que te refieres.
Si que parece que el error viene por el 1 del mes, ya que otras plantillas que no tienen los ºC si que aparecen.
Como se podría solucionar?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer que desaparezca un valor de temperatura desactualizado

Publicado por txema (23 intervenciones) el 12/01/2018 00:07:21
Vamos a ver si del local (el mío), he trasladado bien los enlaces y no se borró alguna coma..

Te cuento las correcciones y anexiones en orden al código.

En algún momento he tenido problemas con la cache, así que he añadido un <meta> para coregirlo

El tema de fechas, está corregido tanto si los días tienen un dígito o dos, igual que los meses y si año tiene dos o cuatro cifras.

En el código original, title y marker se sobreescribían (si te fijas en el mapa viejo, siempre aparecía Xàbia),
Así que he creado un arrray en el orden que lo tenías y he rehecho el código para quye aparezca en el mismo orden.

Y aquí está el código completo, desde <!DOCTYPE html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="refresh" content="300">
 
  <title>Mapa METEOXÀBIA</title>
    <style>
       #map {
        height: 660px;
        width: 1110px
       }
    </style>
  </head>
  <body>
 
    <div id="map"></div>
 
    <script>
 
var URL = ["./estacions/port/mapa.htm", "./estacions/freginal/mapa.htm", "./estacions/valls/mapa.htm", "./estacions/lluca/wx11.html", "./estacions/castellans/mapa.htm", "./estacions/tosalgros/mapa.htm", "./estacions/capnao/wx11.html", "./estacions/poble/wx11.html", "./estacions/clubdegolf/mapa.htm", "./estacions/julians/wx11.html"];
 
var positions = [{
 
    lat: 38.793625,
 
    lng: 0.180238
 
}, {
 
    lat: 38.783567,
 
    lng: 0.166269
 
}, {
 
    lat: 38.783402,
 
    lng: 0.129075
 
}, {
 
    lat: 38.761589,
 
    lng: 0.148581
 
}, {
 
    lat: 38.794598,
 
    lng: 0.151655
 
}, {
 
    lat: 38.749933,
 
    lng: 0.119593
 
}, {
 
    lat: 38.739241,
 
    lng: 0.220552
 
}, {
 
    lat: 38.790208,
 
    lng: 0.162747
 
}, {
 
    lat: 38.747097,
 
    lng: 0.150225
 
}, {
 
    lat: 38.777568,
 
    lng: 0.110755
 
}];
 
var temperatures = new Array();
 
// Creamos un array para las localidades a anexionar a title de los marker
var ciudad = ['Port','Freginal','Barranquera','Lluca','Castellans','Tossal Gros','Cap de la Nao','Xàbia','Xàbia','Xàbia'];
 
function getEstacio(URL, map, x, callback) {
 
    // read text from URL location
 
    var request = new XMLHttpRequest();
 
    request.open('GET', URL, true);
 
    request.send();
 
    request.onreadystatechange = function() {
 
        if (request.readyState === 4 && request.status === 200) {
 
            realtime = request.responseText;
 
            realtime = realtime.split(" ");
 
            if (realtime[1] == "") Marker(realtime[3].split("&deg;C")[0], map, x);
 
            else Marker(realtime[2].split("&deg;C")[0], map, x);
 
 
            callback();
 
        }
 
    }
 
}
 
var x = 0;
 
var getText = function(arr, map) {
 
    getEstacio(URL[x], map, x, function() {
 
        // set x to next item
 
        console.log(x);
 
        x++;
 
        // any more items in array? continue loop
 
        if (x < arr.length) {
 
            getText(arr, map);
 
        }
 
    });
 
}
 
function getRealtime() {
 
    console.log("getRealtime");
 
    map = initMap();
 
    console.log("Map: " + map);
 
    getText(URL, map);
 
}
 
 
function initMap() {
 
    console.log("initMap");
 
    var uluru = {
 
        lat: (38.7665732 + 38.773164) / 2,
 
        lng: (0.050647 + 0.254409) / 2
 
    };
 
    var map = new google.maps.Map(document.getElementById('map'), {
 
        zoom: 13,
 
        center: uluru,
 
        mapTypeId: 'hybrid'
 
    });
 
    return map;
 
}
 
 
function Marker(temperatura, map, x) {
 
    // Eliminamos ºC si los tiene 
    temperatura = temperatura.substr(0, 4);
 
    console.log("Marker" + " Temperatura: " + temperatura + "X: " + x);
 
	// Normalizando la fecha
    var fecha = realtime[0];  //fecha	
 
	var res = fecha.split("/");
 
	// Añadir 0 si dia tiene un solo dígito
	var dia = res[0];
	if (dia.length == 1) {
	    dia = "0"+dia;
	}
	// Añadir 0 si mes tiene un solo dígito
	var mes = res[1]
	if (mes.length == 1) {
	    mes = "0"+mes;
	}
	// Añadir 20 si año tiene solo dos dígitos
	var anno = res[2]
	if (anno.length == 2) {
	    anno = "20"+anno;
	}
 
	var hora = realtime[1];   // hora
 
 
    var hora_datos = new Date(mes + '/' + dia + '/' + anno + ' ' + hora);
 
    var hora_actual = new Date();
 
    var diferencia = hora_actual - hora_datos; // dada en milisegundos
 
    if (diferencia > 36000000) { // 10 minutos
 
        //    alert('la diferencia es mayor a 10 mn. y no muestro el marcador');
 
//        icon = '';  // Con esto aparece el marker rojo de google
 
		icon.setMap(null); // Con esto no aparece el marker
 
		title = '';
 
 
    } else {
 
        //   alert('la diferencia es menor a 10 mn y muestro el marcador');
 
        title = 'Temperatura actual: ' + temperatura;
 
        icon = 'images/numeros/' + Math.round(temperatura) + '.png';
    }
 
    //////// Y seguiríamos con el código normal.
 
    // Tan solo ocultamos los iconos / marker que apareen los rojos de Google Maps 
 
    new google.maps.Marker({
 
        position: positions[x],
 
        map: map,
 
        title: ciudad[x]+ '-' +title,
 
        icon: icon
 
    });
 
}
 
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZap3eSSlAkY5nEkNrIQrxSzR-xo4Rmrg&callback=getRealtime">
    </script>
  </body>
 
</html>

Te muestro el correo en la cabecera del mensaje por si surgen problemas

P.D.: Siempre los mapas me han metido en códigos otros métodos, que vienen bien para refrescar la memoria.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

hacer que desaparezca un valor de temperatura desactualizado

Publicado por Toni (8 intervenciones) el 13/01/2018 10:09:00
Hola Txema
Ayer no estuve en todo el dia disponible port temas personales y hasta ahora no he estado revisando esto.
Estoy probabando y ahora si que aparecen los datos, pero cuando se desactualiza alguno sigue apareciendo, no desaparece.
No acabo de entender los milisegundos de los 10 minutos, porque veo que pones (36000000) 36 millones de segundos entiendo que son 600 minutos. 10 minutos serían 600000 segundos. Igual es que no funciona así no lo entiendo, pero me da a pensar que por eso no desaparecen porque tiene demasiados segundos.
He probado yo de poner los 600000 segundos y de este modo no aparece ningún dato en el mapa.
Y volviendo a dejarlo tal cual lo dejaste tu la última vez he vuelto a probar y aparecian de nuevo todas, anque al momento me han desaparecido todos menos uno, pero los datos estan todos bien sin desactualizar y solo aparece uno en el mapa.
Muchas gracias por todo lo que estás haciendo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

hacer que desaparezca un valor de temperatura desactualizado

Publicado por txema (23 intervenciones) el 13/01/2018 13:32:24
Retomamos el tema.

Efectivamente, los milisegundos son eso: milisegundos. (ten en cuenta que yo estoy trabajando en local sin acceso a los datos de las estaciones en directo y me tengo que dar tiempos largos).
10 minutos = 10 x 60 x 1000 = 600000

Los problemas que he podido ver, están en es "extraña" forma de recorrer el array de las 10 estaciones con sus datos y sus marcadores. Cuando un dato produce un error, arrastra a que no aparezcan los datos que vienen detrás.

Por otra parte estás trabajando con archivos de texto pero con extensiones .htm (¿?) y html, aparentemente sinninguna declaración (<!DOCTYPE html><html>) No quiero saber cómo lo interpretan los navegadores.

Bien, archivos con los que he trabajado son extensión .tex todos ellos.

Y para salvar errores en la comparativa de tiempos, he seguido las recomendaciones de https://www.w3schools.com/jsref/jsref_gettime.asp

Prueba este código y me comentas. Tienes mi correo visible.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html>
  <head>
  <!-- http://www.meteoxabia.com/mapa2pruebas.html -->
  <meta charset="utf-8">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="refresh" content="300">
 
  <title>Mapa METEOXÀBIA</title>
    <style>
       #map {
        height: 660px;
        width: 1110px
       }
    </style>
  </head>
  <body>
 
    <div id="map"></div>
 
    <script>
 
var URL = ["./estacions/port/mapa.htm", "./estacions/freginal/mapa.htm", "./estacions/valls/mapa.htm", "./estacions/lluca/wx11.html", "./estacions/castellans/mapa.htm", "./estacions/tosalgros/mapa.htm", "./estacions/capnao/wx11.html", "./estacions/poble/wx11.html", "./estacions/clubdegolf/mapa.htm", "./estacions/julians/wx11.html"];
 
var positions = [{
 
    lat: 38.793625,
 
    lng: 0.180238
 
}, {
 
    lat: 38.783567,
 
    lng: 0.166269
 
}, {
 
    lat: 38.783402,
 
    lng: 0.129075
 
}, {
 
    lat: 38.761589,
 
    lng: 0.148581
 
}, {
 
    lat: 38.794598,
 
    lng: 0.151655
 
}, {
 
    lat: 38.749933,
 
    lng: 0.119593
 
}, {
 
    lat: 38.739241,
 
    lng: 0.220552
 
}, {
 
    lat: 38.790208,
 
    lng: 0.162747
 
}, {
 
    lat: 38.747097,
 
    lng: 0.150225
 
}, {
 
    lat: 38.777568,
 
    lng: 0.110755
 
}];
 
var temperatures = new Array();
 
// Creamos un array para las localidades a anexionar a title de los marker
var ciudad = ['Port','Freginal','Barranquera','Lluca','Castellans','Tossal Gros','Cap de la Nao','Xàbia','Xàbia','Xàbia'];
 
function getEstacio(URL, map, x, callback) {
 
    // read text from URL location
 
    var request = new XMLHttpRequest();
 
    request.open('GET', URL, true);
 
    request.send();
 
    request.onreadystatechange = function() {
 
        if (request.readyState === 4 && request.status === 200) {
 
            realtime = request.responseText;
 
            realtime = realtime.split(" ");
 
            if (realtime[1] == "") Marker(realtime[3].split("&deg;C")[0], map, x);
 
            else Marker(realtime[2].split("&deg;C")[0], map, x);
 
 
            callback();
 
        }
 
    }
 
}
 
var x = 0;
 
var getText = function(arr, map) {
 
    getEstacio(URL[x], map, x, function() {
 
        // set x to next item
 
        console.log(x);
 
        x++;
 
        // any more items in array? continue loop
 
        if (x < arr.length) {
 
            getText(arr, map);
 
        }
 
    });
 
}
 
function getRealtime() {
 
 
 
    console.log("getRealtime");
 
    map = initMap();
 
    console.log("Map: " + map);
 
    getText(URL, map);
 
}
 
 
function initMap() {
 
    console.log("initMap");
 
    var uluru = {
 
        lat: (38.7665732 + 38.773164) / 2,
 
        lng: (0.050647 + 0.254409) / 2
 
    };
 
    var map = new google.maps.Map(document.getElementById('map'), {
 
        zoom: 13,
 
        center: uluru,
 
        mapTypeId: 'hybrid'
 
    });
 
    return map;
 
}
 
 
function Marker(temperatura, map, x) {
 
    console.log("Marker" + " Temperatura: " + temperatura + "X: " + x);
 
	// Normalizando la fecha
    var fecha = realtime[0];  //fecha	
 
	var res = fecha.split("/");
 
	// Añadir 0 si dia tiene un solo dígito
	var dia = res[0];
	if (dia.length == 1) {
	    dia = "0"+dia;
	}
	// Añadir 0 si mes tiene un solo dígito
	var mes = res[1]
	if (mes.length == 1) {
	    mes = "0"+mes;
	}
	// Añadir 20 si año tiene solo dos dígitos
	var anno = res[2]
	if (anno.length == 2) {
	    anno = "20"+anno;	}
 
	var hora = realtime[1];   // hora	
 
    var hora_datos = new Date(mes + '/' + dia + '/' + anno + ' ' + hora);
	var hd = hora_datos.getTime();
 
    var hora_actual = new Date();
	var ha = hora_actual.getTime();
 
    var diferencia = ha - hd; // dada en milisegundos
 
//  alert(diferencia);	
 
    if (diferencia > 600000) { // 10 minutos
 
        //    alert('la diferencia es mayor a 10 mn. y no muestro el marcador');
 
        icon = '';  // Con esto aparece el marker rojo de google
 
		title = '';
 
 
    } else {
 
        //   alert('la diferencia es menor a 10 mn y muestro el marcador');
 
        title = 'Temperatura actual: ' + temperatura;
 
        icon = 'images/numeros/' + Math.round(temperatura) + '.png';
    }
 
 
    var marker = new google.maps.Marker({
 
        position: positions[x],
 
        map: map,
 
        title: ciudad[x]+ '-' +title,
 
        icon: icon
 
    });
}
 
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZap3eSSlAkY5nEkNrIQrxSzR-xo4Rmrg&callback=getRealtime">
    </script>
  </body>
 
</html>

Saludos.

P,D,: Este código te va a crear problemas de mantenimiento de página. Está tomado de la V2 de Google Maps y adaptado con deficiencias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar