Just trying to get my JSON file to update my google maps location data every 5 seconds.
At the moment the initial dataset loads, but the contnuous stream from the json file does not seem to load correctly. Here is the code i have been using in my Django project.
$(function() {
var locations = {};//A repository for markers (and the data from which they were constructed).
var MAPS_URL = "{% url 'alarmviewer:maps' %}";
//initial dataset for markers
var locs = {
1: { info:'11111. Some random info here', lat:40.538834, lng:-74.555049 }, //these values are wrong
2: { info:'22222. Some random info here', lat:40.543127, lng:-74.606598 },
3: { info:'33333. Some random info here', lat:40.544770, lng:-74.632273 },
4: { info:'44444. Some random info here', lat:40.489954, lng:-74.586175 }
};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: new google.maps.LatLng(40.5000, -74.6203),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var auto_remove = true;//When true, markers for all unreported locs will be removed.
function setMarkers(locObj) {
if(auto_remove) {
//Remove markers for all unreported locs, and the corrsponding locations entry.
$.each(locations, function(key) {
if(!locObj[key]) {
if(locations[key].marker) {
locations[key].marker.setMap(null);
}
delete locations[key];
}
});
}
$.each(locObj, function(key, loc) {
if(!locations[key] && loc.lat!==undefined && loc.lng!==undefined) {
//Marker has not yet been made (and there's enough data to create one).
//Create marker
loc.marker = new google.maps.Marker({
position: new google.maps.LatLng(loc.lat, loc.lng),
map: map
});
//Attach click listener to marker
google.maps.event.addListener(loc.marker, 'click', (function(key) {
return function() {
infowindow.setContent(locations[key].info);
infowindow.open(map, locations[key].marker);
}
})(key));
//Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
locations[key] = loc;
}
else if(locations[key] && loc.remove) {
//Remove marker from map
if(locations[key].marker) {
locations[key].marker.setMap(null);
}
//Remove element from `locations`
delete locations[key];
}
else if(locations[key]) {
//Update the previous data object with the latest data.
$.extend(locations[key], loc);
if(loc.lat!==undefined && loc.lng!==undefined) {
//Update marker position (maybe not necessary but doesn't hurt).
locations[key].marker.setPosition(
new google.maps.LatLng(loc.lat, loc.lng)
);
}
//locations[key].info looks after itself.
}
});
}
var ajaxObj = {//Object to save cluttering the namespace.
options: {
url: MAPS_URL,//The resource that delivers loc data.
dataType: "json"//The type of data tp be returned by the server.
},
delay: 5000,//(milliseconds) the interval between successive gets.
errorCount: 0,//running total of ajax errors.
errorThreshold: 5,//the number of ajax errors beyond which the get cycle should cease.
ticker: null,//setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker);
get: function() { //a function which initiates
if(ajaxObj.errorCount < ajaxObj.errorThreshold) {
ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
}
},
fail: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
ajaxObj.errorCount++;
}
};
//Ajax master routine
function getMarkerData() {
$.ajax(ajaxObj.options)
.done(setMarkers) //fires when ajax returns successfully
.fail(ajaxObj.fail) //fires when an ajax error occurs
.always(ajaxObj.get); //fires after ajax success or ajax error
}
setMarkers(locs);//Create markers from the initial dataset served with the document.
ajaxObj.get();//Start the get cycle.
setTimeout(function() {
setMarkers(testLocs);
}, ajaxObj.delay);
});
Here is an example of the JSON i am sending through.
{% load staticfiles %}
{"testLocs":[
{ "info":"11111. Some random info here", "lat":40.538800,"lng":-74.555049},
{ "info":"11111. Some random info here", "lat":40.543100,"lng":-74.606598},
{ "info":"11111. Some random info here", "lat":40.544700,"lng":-74.632273},
{ "info":"11111. Some random info here", "lat":40.489900,"lng":-74.586175}]}
Can anyone identify where i am going wrong? Is the JSON formatted correctly? this is based on Beetroot-Beetroot's answer from this thread Thanks in advance.
