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 + """]"

Hi Denis,

Why you are building everything from scratch instead of using this component?

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Denis,

Why you are building everything from scratch instead of using this component?

Regards,

Marcelo

I'm using the example I had in another existing screen. I'm gonna try this out. Do you if it allows us to show multiple "vehicles" and change their position according to the data?


Hi Denis,

Yes you can add multiple markers. And than you can remove the marker you want and add it again in the new position.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Denis,

Yes you can add multiple markers. And than you can remove the marker you want and add it again in the new position.

Regards,

Marcelo

Hi Marcelo.

Do you have any example to populate an encoded polyline?

In my previous version I was doing the decode in javascript.


Regards,

Denis


Hi Denis,

The component doesn't support encoded polylines. You would need to change it a bit to support it.

Regards,

Marcelo