I'm using Google map to show objects in real time.
I made a function in Javascript
which is refreshed every 3 seconds and in that it updates those marked on the Google map.
Something like:
vmarcador[value.Id] = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text " + value.Lon
});
vmarcador[value.Id].setPosition(localidade_viatura_atualizado);
Okay, everything works, the problem is that my map seems to be reloaded every 3 seconds is different from that other site where only the object is moved.
The source of the link above is here .
But I can not understand the difference in it from my (the dele is much more complex)
My code, follows his example: link
Basically it is: (change the google map key to one of yours, this one will not work outside of jsbin.com
<script src="https://code.jquery.com/jquery-2.1.4.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFL7XB2lwmJ-albxQgXFoGi4N7xwTO-sU" type="text/javascript"></script>
<div id="map_canvas" style="width:100%; height: 900px"></div>
<script>
$(document).ready(function () {
inicia_tempo_real("");
});
var total_viaturas_exibidas;
var map;
var vmarcador = [];
var janela_detalhes = [];
var vconta_vtrs_inicio = 0;
var vconta_vtrs_real_time = 0;
var ViaturaId;
var UrlRestPontos = "http://coi.wmb.com.br/monitoramento/JsonViaturasOnline";
var tempoRefresh = 5; //Seg
var triangleCoords;
var x = new google.maps.LatLng(-23.120520, -46.546923);
function inicia_tempo_real(VTRId) {
ViaturaId = VTRId;
var mapProp = {
center: x,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map($('#map_canvas')[0], mapProp);
clearInterval(vintervalo);
vconta_vtrs_inicio = 0;
// Recupera origem dos pontos..
$.getJSON(UrlRestPontos + "?viaturaValor=" + ViaturaId, function (valores_recebidos) {
$.each(valores_recebidos.pontos_recebidos, function (i, value) {
var localidade_viatura_atualizado = new google.maps.LatLng(value.Lat, value.Log);
vconta_vtrs_inicio++;
var myLatlng = new google.maps.LatLng(value.Lat, value.Lon);
janela_detalhes[value.Id] = new google.maps.InfoWindow({
content: "VTR:" + value.VTR,
});
vmarcador[value.Id] = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text " + value.Lon
});
vmarcador[value.Id].setPosition(localidade_viatura_atualizado);
janela_detalhes[value.Id].open(map, vmarcador[value.Id]);
google.maps.event.addListener
(
vmarcador[value.Id], 'click', function () {
document.getElementById('IFRAMEMonitoramento').src = '/monitoramento/DetalhesVTRIframe?viaturaValor=' + value.ViaturaId;
$('#myModal').modal();
}
);
});
});
var vintervalo = setInterval(function () {
atualiza()
}, tempoRefresh * 1000);
CarregaAtibaia();
}
function CarregaAtibaia() {
var AreaAtibaia = [];
$.ajax({
type: "GET",
url: "/scripts/coi/bordaAtibaia.json",
dataType: "json",
success: function (data) {
AreaAtibaia = data;
DesenhaAtibaia(AreaAtibaia);
}
});
}
function DesenhaAtibaia(varea_atibaia) {
var AreaAtibaia = new google.maps.Polygon({
paths: varea_atibaia,
strokeColor: '#FF0000',
strokeOpacity: 0.9,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.04
});
AreaAtibaia.setMap(map);
}
function atualiza() {
if (vconta_vtrs_real_time != vconta_vtrs_inicio && vconta_vtrs_real_time > 0) {
vconta_vtrs_real_time = vconta_vtrs_inicio;
// inicia_tempo_real();
}
vconta_vtrs_real_time = 0
$("#viaturas_selecionadas").empty();
$("#viaturas_selecionadas").append('<option value="0">Todas</option>');
$.getJSON(UrlRestPontos + "?viaturaValor=" + ViaturaId, function (valores_recebidos) {
$.each(valores_recebidos.pontos_recebidos, function (i, value) {
var localidade_viatura_atualizado = new google.maps.LatLng(value.Lat, value.Log);
var vvtrs;
var vocorrencias;
var vvalores_mostrar = "";
vconta_vtrs_real_time++;
$("#viaturas_selecionadas").append('<option value="' + value.ViaturaId + '">' + value.VTR + '</option>');
vmarcador[value.Id].setPosition(localidade_viatura_atualizado);
if (value.Situacao == 1) {
vmarcador[value.Id].setIcon('http://coi.wmb.com.br/Content/img/viatura_busy.png')
}
else {
vmarcador[value.Id].setIcon('http://coi.wmb.com.br/Content/img/viatura_free.png')
}
if ($("#exibir_vtr").is(":checked")) {
vvalores_mostrar = "VTR:" + value.VTR;
}
if ($("#exibir_oco").is(":checked")) {
if (vvalores_mostrar != "") {
vvalores_mostrar = vvalores_mostrar + "<br>OCO:" + value.CodigoOcorrencia;
}
else {
vvalores_mostrar = "OCO:" + value.CodigoOcorrencia;
}
}
if ($("#exibir_vtr").is(":checked") || $("#exibir_oco").is(":checked")) {
janela_detalhes[value.Id].open(map, vmarcador[value.Id]);
janela_detalhes[value.Id].setContent(vvalores_mostrar);
}
else {
janela_detalhes[value.Id].close();
}
});
});
}
</script>
Is it my problem that I use setPosition