I need o build a screen where I show the vehicles position according to the latitude and longitude from the DB.
I have a div for the map:
"<div id='map' style='width:100%; height:100%'></div>"
And the javascript to populate the screen:
"<script src='https://maps.googleapis.com/maps/api/js?key=" + Site.GoogleMapAPIKey +
"&v=3.exp&libraries=geometry, places&language=en®ion=UK'></script>
<script>
var markers = [];
var events = [];
var map, GPSPath, GPSPathBorder, line, border
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: 'terrain'
});
var Polyline = [];
if('" + PolylineJson + "')
{
Polyline = JSON.parse('" + PolylineJson + "');
}
for (i = 0; i < Polyline.length; i++)
{
var encoded_data = unescape(Polyline[i]);
var decode = google.maps.geometry.encoding.decodePath(encoded_data);
border = new google.maps.Polyline({
path: decode,
strokeColor: getRandomColor(),
strokeOpacity: 0.8,
strokeWeight: 7,
zIndex: 2
});
border.setMap(map);
line = new google.maps.Polyline({
path: decode,
strokeColor: getRandomColor(),
strokeOpacity: 0.8,
strokeWeight: 5,
zIndex: 3
});
line.setMap(map);
}
var GPSCoordinates = [" + GPSPolygons + "];
GPSPathBorder = new google.maps.Polyline({
path: GPSCoordinates,
geodesic: true,
strokeColor: '#BF360C',
strokeOpacity: 0.8,
strokeWeight: 7,
zIndex: 2
});
GPSPathBorder.setMap(map);
GPSPath = new google.maps.Polyline({
path: GPSCoordinates,
geodesic: true,
strokeColor: '#FF5722',
strokeOpacity: 0.8,
strokeWeight: 5,
zIndex: 3
});
GPSPath.setMap(map);
var Trucks = [" + LastMarker + "];
for (i = 0; i < Trucks.length; i++)
{
LastPosition = new google.maps.Marker({
position: new google.maps.LatLng(Trucks[i][0],Trucks[i][1]),
icon: {
path: '" + Path + "',
rotation:Trucks[i][2],
id:Trucks[i][3],
fillColor: '#000000',
fillOpacity: 1,
scale: .025,
anchor: new google.maps.Point(200, 500)
},
map: map
});
LastPositioni = new google.maps.Marker({
position: new google.maps.LatLng(Trucks[i][0],Trucks[i][1]),
icon: {
path: '" + PathInside + "',
rotation:Trucks[i][2],
id:Trucks[i][3],
fillColor: '" + Site.MainColor + "',
fillOpacity: 1,
scale: .025,
anchor: new google.maps.Point(200, 500)
},
map: map
});
}
var BreakStartCoor = [" + StartBreak + "];
for (i = 0; i < BreakStartCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(BreakStartCoor[i][1], BreakStartCoor[i][2]),
icon: {
url : '/Routilogix/img/breakStart.png'
},
map: map
});
events.push(marker);
}
var BreakEndCoor = [" + EndBreak + "];
for (i = 0; i < BreakEndCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(BreakEndCoor[i][1], BreakEndCoor[i][2]),
icon: {
url : '/Routilogix/img/breakEnd.png'
},
map: map
});
events.push(marker);
}
var BreakDownCoor = [" + BreakDown + "];
for (i = 0; i < BreakDownCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(BreakDownCoor[i][1], BreakDownCoor[i][2]),
icon: {
url : '/Routilogix/img/breakdown.png'
},
map: map
});
events.push(marker);
}
var DelayCoor = [" + Delay + "];
for (i = 0; i < DelayCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(DelayCoor[i][1], DelayCoor[i][2]),
icon: {
url : '/Routilogix/img/delay.png'
},
map: map
});
events.push(marker);
}
var TipCoor = [" + Tip + "];
for (i = 0; i < TipCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(TipCoor[i][1], TipCoor[i][2]),
icon: {
url : '/Routilogix/img/tip.png'
},
map: map
});
events.push(marker);
}
var infowindow = new google.maps.InfoWindow();
var marker, i;
bounds = new google.maps.LatLngBounds();
var userCoor = [" + Markers + "];
for (i = 0; i < userCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1.0,
fillColor: userCoor[i][5],
scale: 5,
strokeWeight: 2
},
map: map
});
markers.push(marker);
markerLbl = new google.maps.Marker ({
position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
//label: userCoor[i][3],
label: {
text: userCoor[i][3],
color: 'black',
fontSize: '10px'
},
map: map
});
markers.push(markerLbl)
loc = new google.maps.LatLng(userCoor[i][1], userCoor[i][2]);
bounds.extend(loc);
google.maps.event.addListener(markerLbl, 'click', (function(markerLbl, i) {
return function() {
infowindow.setContent(userCoor[i][0] + '<br>' + '<strong>ETA: </strong>' + userCoor[i][4]);
infowindow.open(map, markerLbl);
}
})(markerLbl, i));
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(userCoor[i][0] + '<br>' + '<strong>ETA: </strong>' + userCoor[i][4]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function toggleMarkers() {
if (markers[0].getMap() != null) {
var arg = null;
} else {
var arg = map;
}
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(arg);
}
}
function toggleGPSPath() {
if (GPSPath.getMap() != null) {
GPSPath.setMap(null);
GPSPathBorder.setMap(null);
} else {
GPSPath.setMap(map);
GPSPathBorder.setMap(map);
}
}
function toggleLine() {
if (line.getMap() != null) {
line.setMap(null);
border.setMap(null);
} else {
line.setMap(map);
border.setMap(map);
}
}
function toggleEvents() {
if (events[0].getMap() != null) {
var arg = null;
} else {
var arg = map;
}
for (var i = 0; i < events.length; i++) {
events[i].setMap(arg);
}
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
function updatePolyline(newLat,newLng, vehicleId)
{
var pathBorder = GPSPathBorder.getPath();
var path = GPSPath.getPath();
pathBorder.push(new google.maps.LatLng(newLat, newLng, vehicleId));
path.push(new google.maps.LatLng(newLat, newLng, vehicleId));
GPSPathBorder.setPath(pathBorder);
GPSPath.setPath(path);
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function animatedMove(marker, t, current, latitude, longitude, rotation) {
var lat = current.lat();
var lng = current.lng();
var deltalat = (latitude - current.lat()) / 100;
var deltalng = (longitude - current.lng()) / 100;
// var deltalat = (moveto.lat() - current.lat()) / 100;
// var deltalng = (moveto.lng() - current.lng()) / 100;
var delay = 10 * t;
for (var i = 0; i < 100; i++) {
(function(ind) {
setTimeout(
function() {
var lat = marker.position.lat();
var lng = marker.position.lng();
lat += deltalat;
lng += deltalng;
latlng = new google.maps.LatLng(lat, lng);
marker.setPosition(latlng);
var icon = marker.getIcon();
icon.rotation = rotation;
marker.setIcon(icon);
}, delay * ind
);
})(i)
}
}
initMap()
</script>"
I use this function to update the screen from time to time:
"<script>
setInterval(
function () {
document.getElementById('" + Live.Id + "').click();
}, 5000);
</script>"
And in the end I call the below javascript function to update the position:
"updatePolyline(" + Live_GPS.List.Current.GPSCoordinates.Latitude + "," + Live_GPS.List.Current.GPSCoordinates.Longitude + "," + Live_GPS.List.Current.VehicleId.Value + ")"
My doubt is if I'm creating the objects using VehicleId and calling the update function with the VehicleId correctly, beucase it updates only the position of the last object added to the screen, I believe ignoring the Id.
LastMarker: "[" + GPSDesc.List[0].GPSCoordinates.Latitude + "," + GPSDesc.List[0].GPSCoordinates.Longitude + "," + GPSDesc.List[0].Heading.Value + ",""" + GetRoutes2.List.Current.RouteVehicle.VehicleId + """]"
Obs. I'm using Outsystems.
