Buenas tardes foreros, tengo el siguiente problema, estoy haciendo un proyecto con google maps api, para lo cual tengo que hacer un refresh de la posicion de los markers cada x tiempo; el codigo anda, pero me destruye la 'memoria' cache del navegador; trate de hacer un setinterval agregando una variable random (no random exactamente, sino agregando el valor de la funcion gettime()) pero no pasa nada, les pego el codigo y si me pueden dar una mano a ver donde esta fallando les agradezco un monton.
Gustavo.
Código:
<script type="text/javascript">
$(document).ready(function() {
var map = null;
var marker = null;
// init map
var mapLatLng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 15,
center: mapLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
function updateData() {
// update sensor data
//$.get('URL THAT GETS CURRENT LAT & LNG');
// i add this line to generate a 'random' variable in order to avoid page being readed by cache.
var random = "?=" + (new Date()).getTime();
$.ajax({
// url: 'http://localhost:3000/sensors/1.json',
// The line above is your original line, i'll write down the new one
url: 'http://localhost:3000/sensors/1.json' + random, function(data),
success: function(data) {
len = data.length;
for (var i = 0; i < len; i++) {
switch (jQuery.trim(data[i].sensor.title)) {
case "lat":
lat = jQuery.trim(data[i].sensor.value);
break;
case "lon":
lon = jQuery.trim(data[i].sensor.value);
break;
default:
break
} //end switch
} // end for
},
cache: false
});
}
setInterval(function() {
// update data
updateData();
// update google map
var location = new google.maps.LatLng(lat, lon);
marker = new google.maps.Marker({
position: location
});
$('#map_canvas').width = '220px';
$('#map_canvas').height = '588px';
google.maps.event.trigger(map, 'resize');
marker.setMap(map);
//map.setCenter(location);
map.setCenter(marker.getPosition());
}, 5000);
});
</script>
<div class="section">
<div class="column titlecolumn"><h2 class="sectiontitle">CDP GPS</h2></div>
<div class="largecolumn">
<div id="map_canvas"></div>
</div>
<div class="clear"></div>
</div>