From 603dc6686694e267ba693ad8099b938614673401 Mon Sep 17 00:00:00 2001
From: Jonathan Alexis Perez Morales <jonathan.perez@adssistemas.mx>
Date: Wed, 5 Feb 2020 18:35:33 -0700
Subject: [PATCH] CREAR PUNTO DE INTERES EN RASTREO

---
 GPS/Rastreo.aspx    | 2560 +++++++++++++++++++++++--------------------
 GPS/Rastreo.aspx.vb |   44 +
 2 files changed, 1403 insertions(+), 1201 deletions(-)

diff --git a/GPS/Rastreo.aspx b/GPS/Rastreo.aspx
index d09872508..79ce9cf80 100644
--- a/GPS/Rastreo.aspx
+++ b/GPS/Rastreo.aspx
@@ -255,7 +255,7 @@
     <li>
         <asp:UpdatePanel runat="server" UpdateMode="conditional">
             <ContentTemplate>
-                <asp:LinkButton ID="LnkDibujo" OnClientClick="PreparaDibujado();" CommandArgument="KM" Text="<i class='fa fa-pencil-square-o'></i><span>Dibujar GeoReferencia</span>" runat="server">
+                <asp:LinkButton ID="LnkDibujo" OnClientClick="PreparaDibujado();" CommandArgument="KM" Text="<i class='fa fa-pencil-square-o'></i><span>Dibujar GeoReferencia/Punto de Interés</span>" runat="server">
                 </asp:LinkButton>
             </ContentTemplate>
         </asp:UpdatePanel>
@@ -274,6 +274,7 @@
             <asp:HiddenField ID="GeoRutaHistorico" runat="server" ClientIDMode="Static" />
             <asp:HiddenField ID="HdnOpcion" ClientIDMode="static" runat="server" />
             <asp:HiddenField ID="HdnDirecciones" ClientIDMode="static" runat="server" />
+            <asp:HiddenField ID="HdnGrupo" runat="server" Value="-1" ClientIDMode="Static" />
         </ContentTemplate>
     </asp:UpdatePanel>
     <asp:UpdatePanel ID="UpDatosMapa" runat="server" UpdateMode="Conditional">
@@ -316,7 +317,7 @@
                                 </asp:GridView>
                             </ContentTemplate>
                         </asp:UpdatePanel>
-                    </div>               
+                    </div>
                 </ContentTemplate>
             </asp:UpdatePanel>
         </div>
@@ -860,6 +861,48 @@
             </asp:UpdatePanel>
         </div>
     </div>
+    <div id="DivAgregarPuntoInteres" class="modal ADS fade" role="dialog">
+        <div class="modal-dialog">
+            <asp:UpdatePanel ID="UpAgregarPuntoInteres" class="modal-content rowpadding" tabindex="-1" runat="server" UpdateMode="Conditional">
+                <ContentTemplate>
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                        <h4 class="modal-title">Agregar Punto(s) de interés</h4>
+                    </div>
+                    <div class="modal-body">
+                        <div class="form-group form-md-line-input input-iconright">
+                            <asp:TextBox ID="TxtNombrePI" runat="server" CssClass="form-control" CausesValidation="true"></asp:TextBox>
+                            <asp:RequiredFieldValidator ID="RFVNombrePI" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtNombrePI" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Nombre''</b> es necesario, por favor ingréselo." ValidationGroup="GrpPuntoInteres"></asp:RequiredFieldValidator>
+                            <label id="lblPuntos" for="<%= TxtNombrePI.ClientID.ToString()%>">Nombre Punto De Interés:</label>
+                        </div>
+                        <div class="form-group form-md-line-input input-iconright" style="width: 80%; margin-bottom: 20px;">
+                            <asp:TextBox ID="TxtDescripcion" runat="server" CssClass="form-control" CausesValidation="true"></asp:TextBox>
+                            <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtDescripcion" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Descripcion''</b> es necesario, por favor ingréselo." ValidationGroup="GrpPuntoInteres"></asp:RequiredFieldValidator>
+                            <label for="<%= TxtDescripcion.ClientID.ToString()%>">Descripción:</label>
+                        </div>
+                        <div class="row" style="margin-left: 0px; margin-top: 5px; margin-bottom: 5px; text-align: right" align="left">
+                            <div style="margin-right: 15px">
+                                <input type="text" id="TxtGVGrupo" class="form-control input-sm" onkeyup="<%= String.Format("FiltrarTabla('TxtGVGrupo','{0}')", GvGrupos.ClientID) %>" style="display: inline-block; margin-right: -20px; width: 150px;" />
+                                <a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtGVGrupo','{0}')", GvGrupos.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
+                            </div>
+                        </div>
+                        <asp:GridView ID="GvGrupos" runat="server" GridLines="None" DataKeyNames="CvePuntoDeInteresGrupo,PuntoDeInteresGrupo,Descripcion" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-height="150" BorderWidth="1" BorderColor="#D3D3D3" CellSpacing="0" Width="100%" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros">
+                            <Columns>
+                                <asp:BoundField DataField="PuntoDeInteresGrupo" ItemStyle-Width="45%" HeaderText="Agregar a Grupo" ItemStyle-HorizontalAlign="Left" />
+                                <asp:BoundField DataField="Descripcion" ItemStyle-Width="45%" HeaderText="Descripcion" ItemStyle-HorizontalAlign="Left" />
+                            </Columns>
+                        </asp:GridView>
+                    </div>
+                    <div class="modal-footer">
+                        <asp:LinkButton ID="BtnAgregarPunto" runat="server" CssClass="btn btn-primary" ValidationGroup="GrpPuntoInteres"> <i class='material-icons'>done_all</i> Agregar</asp:LinkButton>
+                        <button class="btn btn-default" data-dismiss="modal" value="Cancelar">Cancelar </button>
+                    </div>
+                </ContentTemplate>
+            </asp:UpdatePanel>
+        </div>
+    </div>
     <div runat="server" class="row" style="margin: 0px 0px 10px 0px; display: none">
         <asp:Button runat="server" OnClick="btnImprimir_Click" ID="btnImprimir" CommandArgument="PDF" ToolTip="Imprimir en PDF" CssClass="btn btn-circle mysmallbtn grey" Text="<i class='fa fa-print' aria-hidden='true'></i>"></asp:Button>
         <asp:Button runat="server" OnClick="btnImprimir_Click" ID="BtnImprimirEX" CommandArgument="EXCEL" ToolTip="Imprimir en EXCEL" CssClass="btn btn-circle btn-xs mysmallbtn green" Text="<i class='fa fa-file-excel-o' aria-hidden='true'></i>"></asp:Button>
@@ -1018,7 +1061,7 @@
                     }
                 });
             }, timeout + (j));
-        }
+            }
 
             function CalculaRutaHistorica(coordenadasRuta, lastCoord) {
                 if (coordenadasRuta.length > 0) {
@@ -1724,307 +1767,255 @@
                 var lng = posicion.lng
                 var url = '<%= ClsPaginas.UrlDirecciones%>' + 'nominatim/reverse.php?format=jsonv2&lat=' + lat + '&lon=' + lng;
 
-            $.getJSON(url, function (data) {
-                if (typeof (data.error) === 'undefined') {
-                    marker.formatted_address = data.display_name;
-                    var contenido = infowindow.getContent();
-                    debugger;
-                    if (contenido.indexOf("direccion") >= 0) {
-                        var html = $($.parseHTML(contenido));
-                        var dir = html.filter(".direccion");;
-                        dir.text("Dirección: " + data.display_name);
-                        var htmlstring = "";
-                        for (var i = 0; i < html.length; i++) {
-                            htmlstring = htmlstring.concat(html[i].outerHTML);
-                        }
-                        infowindow.setContent(htmlstring);
-                    } else {
-                        infowindow.setContent(contenido + "<div class='direccion' style='margin-left:5px'>" + "Dirección: " + data.display_name + "</div>");
-                    }
-                    if (indice > -1) {
-                        if (data.display_name.length > 74) {
-                            if (typeof (tr) !== 'undefined') {
-                                tr.cells[2].innerHTML = data.display_name.substring(0, 74) + '...'
-                            }
+                $.getJSON(url, function (data) {
+                    if (typeof (data.error) === 'undefined') {
+                        marker.formatted_address = data.display_name;
+                        var contenido = infowindow.getContent();
+                        debugger;
+                        if (contenido.indexOf("direccion") >= 0) {
+                            var html = $($.parseHTML(contenido));
+                            var dir = html.filter(".direccion");;
+                            dir.text("Dirección: " + data.display_name);
+                            var htmlstring = "";
+                            for (var i = 0; i < html.length; i++) {
+                                htmlstring = htmlstring.concat(html[i].outerHTML);
+                            }
+                            infowindow.setContent(htmlstring);
                         } else {
-                            if (typeof (tr) !== 'undefined') {
-                                tr.cells[2].innerHTML = data.display_name
+                            infowindow.setContent(contenido + "<div class='direccion' style='margin-left:5px'>" + "Dirección: " + data.display_name + "</div>");
+                        }
+                        if (indice > -1) {
+                            if (data.display_name.length > 74) {
+                                if (typeof (tr) !== 'undefined') {
+                                    tr.cells[2].innerHTML = data.display_name.substring(0, 74) + '...'
+                                }
+                            } else {
+                                if (typeof (tr) !== 'undefined') {
+                                    tr.cells[2].innerHTML = data.display_name
+                                }
                             }
                         }
-                    }
-                } else {
-                    marker.formatted_address = "Dirección no encontrada";
-                    if (contenido.indexOf("direccion") >= 0) {
-                        var html = $($.parseHTML(contenido));
-                        var dir = html.filter(".direccion");;
-                        dir.text("Dirección no encontrada");
-                        var htmlstring = "";
-                        for (var i = 0; i < html.length; i++) {
-                            htmlstring = htmlstring.concat(html[i].outerHTML);
-                        }
-                        infowindow.setContent(htmlstring);
                     } else {
-                        infowindow.setContent(infowindow.getContent() + "<div style='margin-left:5px'> Dirección: No Encontrada </div>");
-                    }
-
-                    if (indice) {
-                        var col = indice + 1
-                        var tr = $('#C_GvBarra tr').filter(':nth-child(' + col + ')')
-                        tr.find("td").filter(':nth-child(3)').html(results[0].formatted_address);
-                    }
-                }
-            });
-            //if (marker.formatted_address) { return false; }
-            //else if (marker.formatted_addressrow) {
-            //    infowindow.setContent(infowindow.getContent() + "<div style='margin-left:5px'>" + "Dirección: " + marker.formatted_addressrow + "</div>");
-            //    marker.formatted_address = marker.formatted_addressrow
-            //} else if ($("#C_GvBarra").DataTable().row(indice).node().cells[2].innerHTML.trim() != "Haga click para ver Dirección") {
-            //    marker.formatted_address = $("#C_GvBarra").DataTable().row(indice).node().cells[2].innerHTML.trim();
-            //    infowindow.setContent(infowindow.getContent() + "<div style='margin-left:5px'>" + "Dirección: " + $("#C_GvBarra").DataTable().row(indice).node().cells[2].innerHTML.trim() + "</div>");
-            //}
-            //else {
-
-            //}
-
-        }
-
-        var multiplicador = 1;
-        function doScaledTimeout(i, newPlay) {
-            if (newPlay) {
-                if (multiplicador >= 1 && multiplicador < i) {
-                    multiplicador++;
-                } else {
-                    multiplicador = 1;
-                }
-            } else {
-                multiplicador = i;
-            }
-            var to = setTimeout(function () {
-                pauseIndex = i;
-                $("#C_GvBarra").DataTable().rows(i).nodes().to$("#row0").click()
-            }, multiplicador * 250);
-            ejecuciones.push(to);
-        }
-        var indiceAnteriorKM = 0;
-        function doScaledCLickKM(boton, i) {
-            setTimeout(function () {
-                if (typeof ($("C_GVKm")) !== 'undefined') {
-                    if ($("[idgv='" + i + "']") != null) {
-                        $("[idgv='" + indiceAnteriorKM + "']").css("background-color", 'initial');
-                        $("[idgv='" + i + "']").css("background-color", '#F5B27A');
-                    }
-                }
-                indiceAnteriorKM = i;
-                $(boton).click();
-            }, 250);
-        }
-        function doScaledCLick(boton) {
-
-            setTimeout(function () {
-                $(boton).click();
-            }, 250);
-        }
-
-        function rad(x) { return x * Math.PI / 180; }
-
-        function find_closest_marker(LatLng, Opcion) {
-            var lat = LatLng.lat;
-            var lng = LatLng.lng;
-            var R = 6371; // radius of earth in km
-            var distances = [];
-            var closest = -1;
-            for (i = 0; i < markers.length; i++) {
-                var mlat = markers[i].position.lat();
-                var mlng = markers[i].position.lng();
-                var dLat = rad(mlat - lat);
-                var dLong = rad(mlng - lng);
-                var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-                    Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong / 2) * Math.sin(dLong / 2);
-                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-                var d = R * c;
-                distances[i] = d;
-                if (closest == -1 || d < distances[closest]) {
-                    closest = i;
-                }
-            }
-            if (Opcion === 0) {
-                if (markers[closest].getAnimation() != google.maps.Animation.BOUNCE) {
-                    markers[closest].setAnimation(google.maps.Animation.BOUNCE);
-                } else {
-                    markers[closest].setAnimation(null);
-                }
-
-                stopAnimation(markers[closest])
-            }
-            //else if (Opcion === 1) {
-            //  google.maps.event.trigger(markers[closest], 'click')
-            //}
-        }
-
-        function stopAnimation(marker) {
-            setTimeout(function () {
-                marker.setAnimation(null);
-            }, 750);
-        }
-
-        function DeleteMarkers() {
-            for (var i = 0; i < markers.length; i++) {
-                markers[i].setMap(null);
-            }
-            markers = [];
-            for (var i = 0; i < polylines.length; i++) {
-                polylines[i].setMap(null);
-            }
-            polylines = [];
-            coordspoly = [];
-        }
-
-        function calculateAndDisplayRoute(origin, destination) {
-            directionsService.route({
-                origin: origin,
-                destination: destination,
-                travelMode: 'DRIVING'
-            }, function (response, status) {
-                if (status === 'OK') {
-                    directionsDisplay.setDirections(response);
-                    directionsDisplay.setMap(map);
-                } else {
-                    window.alert('Directions request failed due to ' + status);
-                }
-            });
-        }
-
-        function fitBoundsToVisibleMarkers() {
-
-            var bounds = new google.maps.LatLngBounds();
-
-            for (var i = 0; i < markers.length; i++) {
-                if (markers[i].getVisible()) {
-                    bounds.extend(markers[i].getPosition());
-                }
-            }
-
-            map.fitBounds(bounds);
-
-        }
-
-        function ShowDiv(controlDiv, map) {
-            // Set CSS for the control border.
-            var controlUI = document.createElement('div');
-            controlUI.style.backgroundColor = '#444d58';
-            controlUI.style.border = '2px solid #444d58';
-            controlUI.style.borderRadius = '3px';
-            controlUI.style.width = '100%'
-            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
-            controlUI.style.cursor = 'pointer';
-            controlUI.style.marginRight = '5px';
-            controlUI.style.marginTop = '5px';
-            controlUI.style.marginBottom = '0px';
-            controlUI.style.textAlign = 'center';
-            //    controlUI.title = 'Click para borrar el último punto dibujado';
-            controlDiv.appendChild(controlUI);
-
-            // Set CSS for the control interior.
-            var controlText = document.createElement('div');
-            controlText.style.color = '#ebebeb';
-            controlText.id = "ShowDiv3"
-            controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
-            controlText.style.fontSize = '14px';
-            controlText.style.lineHeight = '20px';
-            controlText.style.paddingLeft = '5px';
-            controlText.style.paddingRight = '5px';
-            controlText.innerHTML = '<i class="fa fa-angle-up" aria-hidden="true"></i>';
-            controlUI.appendChild(controlText);
-
-            // Setup the click event listeners: simply set the map to Chicago.
-            controlUI.addEventListener('click', function () {
-                FNShowDiv();
-            });
-        }
-
-        var open = false;
-        var pause = true;
-        var startPlay = true;
-        var pauseIndex = 0;
-        var ejecuciones = [];
-        function stopTimeout() {
-            for (var i = 0; i < ejecuciones.length; i++) {
-                if (ejecuciones[i] != null) {
-                    clearTimeout(ejecuciones[i]);
-                }
-            }
-        }
-        function Play() {
-            var NoRows = $("#C_GvBarra").DataTable().rows().nodes().length;
-            $("#HdnOpcion").val("Play");
-            for (var i = pauseIndex; i < NoRows; i++) {
-                var newPlay = false;
-                if (pauseIndex > 0) {
-                    newPlay = true;
-                } else {
-                    newPlay = false;
-                }
-                doScaledTimeout(i, newPlay);
-            }
-            if (pauseIndex == (NoRows - 1)) {
-                pause = true;
-                startPlay = true;
-                pauseIndex = 0;
-            }
-        }
-        function OpcionesHistorico() {
-            if ($("#HdnOpcion").val() === 'All' || $("#HdnOpcion").val() === 'Idle' || $("#HdnOpcion").val() === 'Ralenti') {
-                $('#btnPlay').css('display', '');
-                $('#btnPrintExcel').css('display', '');
-                $('#btnPrintPDF').css('display', '');
-                $("#btnPlay").click(function () {
-                    pause = !pause;
-                    if (pause) {
-                        stopTimeout();
-                    } else {
-                        if (startPlay) {
-                            startPlay = false;
-                            Play();
+                        marker.formatted_address = "Dirección no encontrada";
+                        if (contenido.indexOf("direccion") >= 0) {
+                            var html = $($.parseHTML(contenido));
+                            var dir = html.filter(".direccion");;
+                            dir.text("Dirección no encontrada");
+                            var htmlstring = "";
+                            for (var i = 0; i < html.length; i++) {
+                                htmlstring = htmlstring.concat(html[i].outerHTML);
+                            }
+                            infowindow.setContent(htmlstring);
                         } else {
-                            Play();
-                        }
-                    }
-                    if ($('#btnPlay > i').hasClass("fa-pause")) {
-                        $('#btnPlay > i').removeClass("fa-pause").addClass("fa-play");
-                    } else if ($('#btnPlay > i').hasClass("fa-play")) {
-                        $('#btnPlay > i').removeClass("fa-play").addClass("fa-pause");
-                    }
+                            infowindow.setContent(infowindow.getContent() + "<div style='margin-left:5px'> Dirección: No Encontrada </div>");
+                        }
 
+                        if (indice) {
+                            var col = indice + 1
+                            var tr = $('#C_GvBarra tr').filter(':nth-child(' + col + ')')
+                            tr.find("td").filter(':nth-child(3)').html(results[0].formatted_address);
+                        }
+                    }
                 });
-                $("#btnPrintExcel").click(function () {
-                    var s;
-                    for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
-                        s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
-                    }
-                    $("#HdnDirecciones").val(s);
-                    doScaledCLick("#C_BtnImprimirEX")
-                });
-                $("#btnPrintPDF").click(function () {
-                    var s = "";
-                    for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
-                        s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
-                    }
-                    $("#HdnDirecciones").val(s);
-                    doScaledCLick("#C_btnImprimir")
-                });
-            }
-        }
-        function FNShowDiv() {
-            if (open === false) {
-                //$("#ChkSeguimiento").appendTo("#DivSeguimiento");
-                //$("#ChkSeguimiento").appendTo("#DivSeguimiento");
-                $("#h").modal()
-                $("#ShowDiv3").css("line-height", "34px")
-                open = true
-                $("#ShowDiv3").html('<i class="fa fa-angle-down" aria-hidden="true"></i>')
+                //if (marker.formatted_address) { return false; }
+                //else if (marker.formatted_addressrow) {
+                //    infowindow.setContent(infowindow.getContent() + "<div style='margin-left:5px'>" + "Dirección: " + marker.formatted_addressrow + "</div>");
+                //    marker.formatted_address = marker.formatted_addressrow
+                //} else if ($("#C_GvBarra").DataTable().row(indice).node().cells[2].innerHTML.trim() != "Haga click para ver Dirección") {
+                //    marker.formatted_address = $("#C_GvBarra").DataTable().row(indice).node().cells[2].innerHTML.trim();
+                //    infowindow.setContent(infowindow.getContent() + "<div style='margin-left:5px'>" + "Dirección: " + $("#C_GvBarra").DataTable().row(indice).node().cells[2].innerHTML.trim() + "</div>");
+                //}
+                //else {
+
+                //}
+
+            }
+
+            var multiplicador = 1;
+            function doScaledTimeout(i, newPlay) {
+                if (newPlay) {
+                    if (multiplicador >= 1 && multiplicador < i) {
+                        multiplicador++;
+                    } else {
+                        multiplicador = 1;
+                    }
+                } else {
+                    multiplicador = i;
+                }
+                var to = setTimeout(function () {
+                    pauseIndex = i;
+                    $("#C_GvBarra").DataTable().rows(i).nodes().to$("#row0").click()
+                }, multiplicador * 250);
+                ejecuciones.push(to);
+            }
+            var indiceAnteriorKM = 0;
+            function doScaledCLickKM(boton, i) {
                 setTimeout(function () {
-                    $('.table.ADScrollPaginator2').DataTable().draw();
-                }, 150);
+                    if (typeof ($("C_GVKm")) !== 'undefined') {
+                        if ($("[idgv='" + i + "']") != null) {
+                            $("[idgv='" + indiceAnteriorKM + "']").css("background-color", 'initial');
+                            $("[idgv='" + i + "']").css("background-color", '#F5B27A');
+                        }
+                    }
+                    indiceAnteriorKM = i;
+                    $(boton).click();
+                }, 250);
+            }
+            function doScaledCLick(boton) {
+
+                setTimeout(function () {
+                    $(boton).click();
+                }, 250);
+            }
+
+            function rad(x) { return x * Math.PI / 180; }
+
+            function find_closest_marker(LatLng, Opcion) {
+                var lat = LatLng.lat;
+                var lng = LatLng.lng;
+                var R = 6371; // radius of earth in km
+                var distances = [];
+                var closest = -1;
+                for (i = 0; i < markers.length; i++) {
+                    var mlat = markers[i].position.lat();
+                    var mlng = markers[i].position.lng();
+                    var dLat = rad(mlat - lat);
+                    var dLong = rad(mlng - lng);
+                    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+                        Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong / 2) * Math.sin(dLong / 2);
+                    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+                    var d = R * c;
+                    distances[i] = d;
+                    if (closest == -1 || d < distances[closest]) {
+                        closest = i;
+                    }
+                }
+                if (Opcion === 0) {
+                    if (markers[closest].getAnimation() != google.maps.Animation.BOUNCE) {
+                        markers[closest].setAnimation(google.maps.Animation.BOUNCE);
+                    } else {
+                        markers[closest].setAnimation(null);
+                    }
+
+                    stopAnimation(markers[closest])
+                }
+                //else if (Opcion === 1) {
+                //  google.maps.event.trigger(markers[closest], 'click')
+                //}
+            }
+
+            function stopAnimation(marker) {
+                setTimeout(function () {
+                    marker.setAnimation(null);
+                }, 750);
+            }
+
+            function DeleteMarkers() {
+                for (var i = 0; i < markers.length; i++) {
+                    markers[i].setMap(null);
+                }
+                markers = [];
+                for (var i = 0; i < polylines.length; i++) {
+                    polylines[i].setMap(null);
+                }
+                polylines = [];
+                coordspoly = [];
+            }
+
+            function calculateAndDisplayRoute(origin, destination) {
+                directionsService.route({
+                    origin: origin,
+                    destination: destination,
+                    travelMode: 'DRIVING'
+                }, function (response, status) {
+                    if (status === 'OK') {
+                        directionsDisplay.setDirections(response);
+                        directionsDisplay.setMap(map);
+                    } else {
+                        window.alert('Directions request failed due to ' + status);
+                    }
+                });
+            }
+
+            function fitBoundsToVisibleMarkers() {
+
+                var bounds = new google.maps.LatLngBounds();
+
+                for (var i = 0; i < markers.length; i++) {
+                    if (markers[i].getVisible()) {
+                        bounds.extend(markers[i].getPosition());
+                    }
+                }
+
+                map.fitBounds(bounds);
+
+            }
+
+            function ShowDiv(controlDiv, map) {
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.style.backgroundColor = '#444d58';
+                controlUI.style.border = '2px solid #444d58';
+                controlUI.style.borderRadius = '3px';
+                controlUI.style.width = '100%'
+                controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+                controlUI.style.cursor = 'pointer';
+                controlUI.style.marginRight = '5px';
+                controlUI.style.marginTop = '5px';
+                controlUI.style.marginBottom = '0px';
+                controlUI.style.textAlign = 'center';
+                //    controlUI.title = 'Click para borrar el último punto dibujado';
+                controlDiv.appendChild(controlUI);
+
+                // Set CSS for the control interior.
+                var controlText = document.createElement('div');
+                controlText.style.color = '#ebebeb';
+                controlText.id = "ShowDiv3"
+                controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
+                controlText.style.fontSize = '14px';
+                controlText.style.lineHeight = '20px';
+                controlText.style.paddingLeft = '5px';
+                controlText.style.paddingRight = '5px';
+                controlText.innerHTML = '<i class="fa fa-angle-up" aria-hidden="true"></i>';
+                controlUI.appendChild(controlText);
+
+                // Setup the click event listeners: simply set the map to Chicago.
+                controlUI.addEventListener('click', function () {
+                    FNShowDiv();
+                });
+            }
+
+            var open = false;
+            var pause = true;
+            var startPlay = true;
+            var pauseIndex = 0;
+            var ejecuciones = [];
+            function stopTimeout() {
+                for (var i = 0; i < ejecuciones.length; i++) {
+                    if (ejecuciones[i] != null) {
+                        clearTimeout(ejecuciones[i]);
+                    }
+                }
+            }
+            function Play() {
+                var NoRows = $("#C_GvBarra").DataTable().rows().nodes().length;
+                $("#HdnOpcion").val("Play");
+                for (var i = pauseIndex; i < NoRows; i++) {
+                    var newPlay = false;
+                    if (pauseIndex > 0) {
+                        newPlay = true;
+                    } else {
+                        newPlay = false;
+                    }
+                    doScaledTimeout(i, newPlay);
+                }
+                if (pauseIndex == (NoRows - 1)) {
+                    pause = true;
+                    startPlay = true;
+                    pauseIndex = 0;
+                }
+            }
+            function OpcionesHistorico() {
                 if ($("#HdnOpcion").val() === 'All' || $("#HdnOpcion").val() === 'Idle' || $("#HdnOpcion").val() === 'Ralenti') {
                     $('#btnPlay').css('display', '');
                     $('#btnPrintExcel').css('display', '');
@@ -2064,936 +2055,1103 @@
                         $("#HdnDirecciones").val(s);
                         doScaledCLick("#C_btnImprimir")
                     });
-                } else if ($("#HdnOpcion").val() === 'Speed') {
-
-                    $('#btnPrintExcel').css('display', '');
-                    $('#btnPrintPDF').css('display', '');
-
-                    $("#btnPrintExcel").click(function () {
-                        var s;
-                        for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
-                            s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
-                        }
-                        $("#HdnDirecciones").val(s);
-                        doScaledCLick("#C_BtnImprimirEX")
-                    });
-                    $("#btnPrintPDF").click(function () {
-                        var s = "";
-                        for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
-                            s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
-                        }
-                        $("#HdnDirecciones").val(s);
-                        doScaledCLick("#C_btnImprimir")
-                    });
-                } else if ($("#HdnOpcion").val() === 'Last') {
-                    $('#btnPrintExcel').css('display', '');
-                    $("#btnPrintExcel").click(function () {
-                        var s;
-                        for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
-                            s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
-                        }
-                        $("#HdnDirecciones").val(s);
-                        doScaledCLick("#C_BtnImprimirEX");
-                    });
-                }
-            } else {
-                $("#h").modal('hide')
-                $("#ShowDiv3").css("line-height", "20px")
-                open = false
-                $("#ShowDiv3").html('<i class="fa fa-angle-up" aria-hidden="true"></i>')
-            }
-        }
-
-        function CargaComandos(Vehiculo, CveDispositivo) {
-            //  if (open) { FNShowDiv(); }
-            $("#HdnCveDipositivo").val(CveDispositivo)
-            $("#myModalLabel").text("Comando para vehículo: " + Vehiculo)
-            closeLastOpenedInfoWindow();
-            $("#divComandos").modal()
-            $("#C_BtnCargaComandos").click()
-        }
-
-
-        //Region GEOREFERENCIAS
-        var mcoords = [];
-        var markersg = [];
-        var s = "";
-        var nextSegment;
-
-        function PreparaDibujado(index) {
-            if ($("#ULTIMOPUNTODV").length <= 0) {
-                var upControlDiv = document.createElement('div');
-                var upControl = new ControlUltimoPunto(upControlDiv, map);
-                upControlDiv.index = 1;
-                upControlDiv.id = "ULTIMOPUNTODV"
-                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(upControlDiv);
-            }
-            if ($("#DVSELECT").length <= 0) {
-                var SelectControlDiv = document.createElement('div');
-                var SelectControl = new ControlSelect(SelectControlDiv, map);
-                SelectControlDiv.id = "DVSELECT"
-                SelectControlDiv.index = 1;
-                map.controls[google.maps.ControlPosition.TOP_LEFT].push(SelectControlDiv);
-                map.addListener('click', addLatLng);
-            }
-
-            if ($("#DvGuardar").length <= 0) {
-                var routeControlDiv = document.createElement('div');
-                var routeControl = new ControlGuardarRuta(routeControlDiv, map);
-                routeControlDiv.id = "DvGuardar"
-                if (typeof (index) !== 'undefined') {
-                    routeControlDiv.index = index;
-                }
-                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(routeControlDiv);
-            }
-
-        }
-        function PreparaDibujadoHistorico() {
-            if ($("#DvGuardarHistorico").length <= 0) {
-                var routeControlDiv = document.createElement('div');
-                var routeControl = new ControlGuardarRutaHistorico(routeControlDiv, map);
-                routeControlDiv.id = "DvGuardarHistorico"
-                routeControlDiv.index = 2;
-                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(routeControlDiv);
-            }
-        }
-
-        function TerminaDibujado() {
-            if ($("#ULTIMOPUNTODV").length > 0) {
-                $("#ULTIMOPUNTODV").remove()
-            }
-            if ($("#DVSELECT").length > 0) {
-                $("#DVSELECT").remove()
-                google.maps.event.clearListeners(map, 'click');
-                DeleteMarkersG();
-            }
-            if ($("#DvGuardar").length > 0) {
-                $("#DvGuardar").remove()
-            }
-        }
-
-        function ControlUltimoPunto(controlDiv, map) {
-
-            // Set CSS for the control border.
-            var controlUI = document.createElement('div');
-            controlUI.style.backgroundColor = '#fff';
-            controlUI.style.border = '2px solid #fff';
-            controlUI.style.borderRadius = '3px';
-            controlUI.style.width = '165px'
-            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
-            controlUI.style.cursor = 'pointer';
-            controlUI.style.marginRight = '5px';
-            controlUI.style.marginTop = '5px';
-            controlUI.style.marginBottom = '22px';
-            controlUI.style.textAlign = 'center';
-            controlUI.title = 'Click para borrar el último punto dibujado';
-            controlDiv.appendChild(controlUI);
-
-            // Set CSS for the control interior.
-            var controlText = document.createElement('div');
-            controlText.style.color = 'rgb(25,25,25)';
-            controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
-            controlText.style.fontSize = '14px';
-            controlText.style.lineHeight = '38px';
-            controlText.style.paddingLeft = '5px';
-            controlText.style.paddingRight = '5px';
-            controlText.innerHTML = 'Borrar Último Punto';
-            controlUI.appendChild(controlText);
-
-            // Setup the click event listeners: simply set the map to Chicago.
-            controlUI.addEventListener('click', function () {
-                EliminarUltimoPunto();
-            });
-
-        }
-
-        function ControlSelect(controlDiv, map) {
-
-            // Set CSS for the control border.
-            var controlUI = document.createElement('div');
-            controlUI.style.marginLeft = '10px';
-            controlUI.style.zIndex = '0';
-            controlUI.style.cursor = 'pointer';
-            // controlUI.style.position = 'absolute';
-            controlUI.style.left = "0px";
-            controlUI.style.width = "150px";
-            controlUI.style.marginTop = "10px"
-            controlUI.style.top = "0px";
-            controlUI.className = 'gmnoprint';
-
-            controlDiv.appendChild(controlUI);
-
-            var ControlSub1 = document.createElement('div')
-            ControlSub1.style.float = 'left';
-            ControlSub1.className = 'gm-style-mtc'
-            controlUI.appendChild(ControlSub1)
-
-            var ControlSub2 = document.createElement('div')
-            ControlSub2.style.direction = 'ltr';
-            ControlSub2.style.overflow = 'hidden';
-            ControlSub2.id = "Geocerca"
-            ControlSub2.style.textAlign = 'center';
-            ControlSub2.style.position = 'relative';
-            ControlSub2.style.color = 'rgb(0,0,0)';
-            ControlSub2.style.fontFamily = ' "Open Sans", sans-serif; ';
-            ControlSub2.style.msUserSelect = 'none;';
-            ControlSub2.style.fontSize = '11px'
-            ControlSub2.style.backgroundColor = 'rgb(255,255,255)'
-            ControlSub2.style.padding = '11px'
-            ControlSub2.style.backgroundClip = 'padding-box'
-            ControlSub2.style.minWidth = '28px'
-            ControlSub2.style.fontWeight = '500'
-            ControlSub2.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
-            ControlSub2.innerHTML = 'Geocerca'
-            ControlSub1.appendChild(ControlSub2)
-
-            var ControlSub3 = document.createElement('div')
-            ControlSub3.style.float = 'left';
-            ControlSub3.className = 'gm-style-mtc'
-            controlUI.appendChild(ControlSub3)
-
-            var ControlSub4 = document.createElement('div')
-            ControlSub4.style.direction = 'ltr';
-            ControlSub4.style.overflow = 'hidden';
-            ControlSub4.style.textAlign = 'center';
-            ControlSub4.id = "Georuta"
-            ControlSub4.style.position = 'relative';
-            ControlSub4.style.color = 'rgb(86,86,86)';
-            ControlSub4.style.fontFamily = ' "Open Sans", sans-serif; ';
-            ControlSub4.style.msUserSelect = 'none;';
-            ControlSub4.style.fontSize = '11px'
-            ControlSub4.style.backgroundColor = 'rgb(255,255,255)'
-            ControlSub4.style.padding = '11px'
-            ControlSub4.style.backgroundClip = 'padding-box'
-            ControlSub4.style.minWidth = '38px'
-            ControlSub4.style.fontWeight = '500'
-            ControlSub4.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
-            ControlSub4.style.borderLeft = '0px;'
-            ControlSub4.innerHTML = 'Georuta'
-            ControlSub3.appendChild(ControlSub4)
-
-
-            // Setup the click event listeners: simply set the map to Chicago.
-            ControlSub3.addEventListener('click', function () {
-                CambiaTipo('Georuta');
-            });
-
-            ControlSub1.addEventListener('click', function () {
-                CambiaTipo('Geocerca');
-            });
-
-        }
-
-        function ControlColor(controlDiv, map) {
-
-            // Set CSS for the control border.
-            var controlUI = document.createElement('div');
-            controlUI.style.backgroundColor = '#fff';
-            controlUI.style.border = '2px solid #fff';
-            controlUI.style.borderRadius = '3px';
-            controlUI.style.pointer = '3px';
-            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
-            controlUI.style.cursor = 'pointer';
-            controlUI.style.marginLeft = '10px';
-            controlUI.style.marginTop = '5px';
-            controlUI.style.marginBottom = '22px';
-            controlUI.style.textAlign = 'center';
-            controlUI.style.color = 'rgb(25,25,25)';
-            controlUI.style.fontFamily = ' "Open Sans", sans-serif; ';
-            controlUI.style.fontSize = '14px';
-            controlUI.style.paddingLeft = '5px';
-            controlUI.style.paddingRight = '5px';
-            controlUI.innerHTML = 'Cambiar Color '
-            controlUI.title = 'Click para cambiar el color del polygono';
-            controlDiv.appendChild(controlUI);
-
-            // Set CSS for the control interior.
-            var controlText = document.createElement('input');
-            controlText.type = 'hidden';
-            controlText.id = 'hidden-input'
-            controlText.className = 'demo'
-            controlText.value = '#0088FF'
-            controlText.onchange = function () { CambiaColor(); };
-            controlUI.appendChild(controlText);
-
-            // Setup the click event listeners: simply set the map to Chicago.
-            controlUI.addEventListener('click', function () {
-                ComponentsColorPickers.init();
-            });
-
-
-        }
-
-        function ControlGuardarRuta(controlDiv, map) {
-
-            // Set CSS for the control border.
-            var controlUI = document.createElement('div');
-            controlUI.id = "btnGuardarRuta"
-            controlUI.style.display = 'none';
-            controlUI.style.backgroundColor = '#4B77BE';
-            controlUI.style.color = "#fff";
-            controlUI.style.borderRadius = '3px';
-            controlUI.style.width = '165px'
-            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
-            controlUI.style.cursor = 'pointer';
-            controlUI.style.marginRight = '5px';
-            controlUI.style.marginTop = '5px';
-            controlUI.style.marginBottom = '22px';
-            controlUI.style.textAlign = 'center';
-            controlUI.title = 'Guardar la ruta trazada como georeferencia';
-            controlDiv.appendChild(controlUI);
-
-            // Set CSS for the control interior.
-            var controlText = document.createElement('div');
-            controlText.style.color = '#fff';
-            controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
-            controlText.style.fontSize = '14px';
-            controlText.style.lineHeight = '38px';
-            controlText.style.paddingLeft = '5px';
-            controlText.style.paddingRight = '5px';
-            controlText.innerHTML = 'Guardar GeoReferencia';
-            controlUI.appendChild(controlText);
-
-            // Setup the click event listeners: simply set the map to Chicago.
-            controlUI.addEventListener('click', function () {
-                var r = polygon.getPath();
-                var s = "";
-                r.forEach(function (xy, i) { s += xy.lng() + ' ' + xy.lat() + ',' })
-                //s += r.j[0].lng() + ' ' + r.j[0].lat();
-                $("#GeoCerca").val(s);
-
-                $("#divAgregarGeoreferencia").modal();
-                $("#C_TxtNombre").val("")
-                $("#C_TxtTolerancia").val("")
-                $("#C_TxtFechaFG").val("")
-                $("#C_TxtFechaIG").val("")
-                $(".geo").checked = false
-            });
-
-        }
-        function CargaVehiculosHistoricos() {
-            var data = [];
-            for (var i = 0; i < geoRutasHistoricas.length; i++) {
-                var dato = {
-                    id: geoRutasHistoricas[i].ValueEquipo,
-                    text: geoRutasHistoricas[i].NombreEquipo
-                };
-                data.push(dato);
-            }
-
-            $("#C_DdlEquipoHis").select2({
-                data: data
-            });
-
-            $('#C_DdlEquipoHis').on('select2:select', function (e) {
-                var geoRuta = geoRutasHistoricas.filter(function (item) { return (item.ValueEquipo == parseInt($("#C_DdlEquipoHis").val())); })
-                if (geoRuta.length = 1) {
-                    $("#GeoRutaHistorico").val(JSON.stringify(geoRuta[0]));
-                }
-
-            });
-            $("#C_TxtNombreHis").val("")
-            $("#C_TxtToleHis").val("")
-            $("#C_TxtFechaIHis").val("")
-            $("#C_TxtFechaFHis").val("")
-            $(".geo").checked = false
-        }
-        var geoRutasHistoricas = [];
-        function ControlGuardarRutaHistorico(controlDiv, map) {
-
-            // Set CSS for the control border.
-            var controlUI = document.createElement('div');
-            controlUI.id = "btnGuardarRutaHistorico"
-            //controlUI.style.display = 'none';
-            controlUI.style.backgroundColor = '#4B77BE';
-            controlUI.style.color = "#fff";
-            controlUI.style.borderRadius = '3px';
-            controlUI.style.width = '165px'
-            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
-            controlUI.style.cursor = 'pointer';
-            controlUI.style.marginRight = '5px';
-            controlUI.style.marginTop = '5px';
-            controlUI.style.marginBottom = '22px';
-            controlUI.style.textAlign = 'center';
-            controlUI.title = 'Guardar la ruta trazada como georeferencia';
-            controlDiv.appendChild(controlUI);
-
-            // Set CSS for the control interior.
-            var controlText = document.createElement('div');
-            controlText.style.color = '#fff';
-            controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
-            controlText.style.fontSize = '14px';
-            controlText.style.lineHeight = '38px';
-            controlText.style.paddingLeft = '5px';
-            controlText.style.paddingRight = '5px';
-            controlText.innerHTML = 'Guardar Ruta';
-            controlUI.appendChild(controlText);
-
-            // Setup the click event listeners: simply set the map to Chicago.
-            controlUI.addEventListener('click', function () {
-
-                CargaVehiculosHistoricos();
-
-                $("#divAgregarGeoreferenciaHistorico").modal('show');
-
-                if (geoRutasHistoricas.length > 0) {
-                    $('#C_DdlEquipoHis').val(geoRutasHistoricas[0].ValueEquipo).trigger('change.select2');
-                    $("#GeoRutaHistorico").val(JSON.stringify(geoRutasHistoricas[0]));
-                }
-            });
-
-        }
-
-        function CambiaTipo(Tipo) {
-            DeleteMarkersG();
-            if (Tipo === 'Geocerca') {
-                $("#HdnTipo").val('Geocerca')
-                $("#Geocerca").css("font-weight", "bold")
-                $("#Georuta").css("font-weight", "normal")
-            } else if (Tipo === 'Georuta') {
-                $("#HdnTipo").val('Georuta')
-                $("#Geocerca").css("font-weight", "normal")
-                $("#Georuta").css("font-weight", "bold")
-            }
-        }
-
-        function addLatLng(event) {
-            // var path = poly.getPath();
-            // path.push(event.latLng);
-            var lat = event.latLng.lat();
-            var lng = event.latLng.lng();
-            mcoords.push(event.latLng)
-
-            var info = new google.maps.InfoWindow({
-                content: "(" + lat + " " + lng + ")"
-            });
-
-            var marker = new google.maps.Marker({
-                position: event.latLng,
-                title: 'Punto',
-                map: map
-            });
-            markersg.push(marker);
-            marker.addListener('click', function () {
-                info.open(map, marker);
-            });
-            if ($("#HdnTipo").val() === 'Georuta') {
-                if (markersg.length > 1) {
-                    CreaRuta();
-                    $("#btnGuardarRuta").css("display", "")
                 }
             }
-            else if ($("#HdnTipo").val() === 'Geocerca') {
-                var h = $('#GeoCerca').val() + lng + " " + lat + ","
-                $('#GeoCerca').val(h)
-                if (markersg.length == 1) {
-                    $('#CommandArg').val(lng + " " + lat)
-                }
-                if (markersg.length === 3) {
-                    creaPoligono();
-                    $("#btnGuardarRuta").css("display", "")
-                } else if (markersg.length > 3) {
-                    var path = polygon.getPath();
-                    path.push(event.latLng)
-                }
-            }
-
-        }
-
-        function creaPoligono() {
-            polygon = new google.maps.Polygon({
-                paths: mcoords,
-                strokeColor: "#0088FF",
-                strokeOpacity: 0.8,
-                strokeWeight: 2,
-                fillColor: "#0088FF",
-                fillOpacity: 0.35,
-                editable: true
-            });
-            polygon.setMap(map);
-            $("#C_BtnCrear").prop('disabled', false);
-        }
-
-        function CreaRuta() {
-            var start = markersg[0].position;
-            var end = markersg[markersg.length - 1].position;
-            var waypts = [];
-            s = ""
-
-            for (var i = 1; i < markersg.length - 1; i++) {
-                waypts.push({
-                    location: markersg[i].position,
-                    stopover: true
-                });
-            }
-            directionsService.route({
-                origin: start,
-                destination: end,
-                travelMode: 'DRIVING',
-                waypoints: waypts
-            }, function (response, status) {
-                if (status === 'OK') {
-                    directionsDisplay.setDirections(response);
-                    directionsDisplay.setMap(map);
-
-                    var legs = response.routes[0].legs;
-                    for (i = 0; i < legs.length; i++) {
-                        var steps = legs[i].steps;
-                        for (j = 0; j < steps.length; j++) {
-                            var nextSegment = steps[j].path;
-                            for (k = 0; k < nextSegment.length; k++) {
-                                s = s + nextSegment[k] + '+'
+            function FNShowDiv() {
+                if (open === false) {
+                    //$("#ChkSeguimiento").appendTo("#DivSeguimiento");
+                    //$("#ChkSeguimiento").appendTo("#DivSeguimiento");
+                    $("#h").modal()
+                    $("#ShowDiv3").css("line-height", "34px")
+                    open = true
+                    $("#ShowDiv3").html('<i class="fa fa-angle-down" aria-hidden="true"></i>')
+                    setTimeout(function () {
+                        $('.table.ADScrollPaginator2').DataTable().draw();
+                    }, 150);
+                    if ($("#HdnOpcion").val() === 'All' || $("#HdnOpcion").val() === 'Idle' || $("#HdnOpcion").val() === 'Ralenti') {
+                        $('#btnPlay').css('display', '');
+                        $('#btnPrintExcel').css('display', '');
+                        $('#btnPrintPDF').css('display', '');
+                        $("#btnPlay").click(function () {
+                            pause = !pause;
+                            if (pause) {
+                                stopTimeout();
+                            } else {
+                                if (startPlay) {
+                                    startPlay = false;
+                                    Play();
+                                } else {
+                                    Play();
+                                }
+                            }
+                            if ($('#btnPlay > i').hasClass("fa-pause")) {
+                                $('#btnPlay > i').removeClass("fa-pause").addClass("fa-play");
+                            } else if ($('#btnPlay > i').hasClass("fa-play")) {
+                                $('#btnPlay > i').removeClass("fa-play").addClass("fa-pause");
                             }
-                        }
-                    }
-                    $('#CommandArg').val(s);
-                } else {
-                    window.alert('Directions request failed due to ' + status);
-                }
-            });
-        }
 
-        function EliminarUltimoPunto() {
-            if (markersg.length > 0) {
-                markersg[markersg.length - 1].setMap(null)
-                markersg.splice((markersg.length - 1), 1);
-                mcoords.splice((mcoords.length - 1), 1);
+                        });
+                        $("#btnPrintExcel").click(function () {
+                            var s;
+                            for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
+                                s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
+                            }
+                            $("#HdnDirecciones").val(s);
+                            doScaledCLick("#C_BtnImprimirEX")
+                        });
+                        $("#btnPrintPDF").click(function () {
+                            var s = "";
+                            for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
+                                s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
+                            }
+                            $("#HdnDirecciones").val(s);
+                            doScaledCLick("#C_btnImprimir")
+                        });
+                    } else if ($("#HdnOpcion").val() === 'Speed') {
+
+                        $('#btnPrintExcel').css('display', '');
+                        $('#btnPrintPDF').css('display', '');
+
+                        $("#btnPrintExcel").click(function () {
+                            var s;
+                            for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
+                                s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
+                            }
+                            $("#HdnDirecciones").val(s);
+                            doScaledCLick("#C_BtnImprimirEX")
+                        });
+                        $("#btnPrintPDF").click(function () {
+                            var s = "";
+                            for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
+                                s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
+                            }
+                            $("#HdnDirecciones").val(s);
+                            doScaledCLick("#C_btnImprimir")
+                        });
+                    } else if ($("#HdnOpcion").val() === 'Last') {
+                        $('#btnPrintExcel').css('display', '');
+                        $("#btnPrintExcel").click(function () {
+                            var s;
+                            for (var i = 0; i < $("#C_GvBarra").DataTable().rows().nodes().length; i++) {
+                                s = s + $("#C_GvBarra").DataTable().row(i).node().cells[2].title.trim() + ';';
+                            }
+                            $("#HdnDirecciones").val(s);
+                            doScaledCLick("#C_BtnImprimirEX");
+                        });
+                    }
+                } else {
+                    $("#h").modal('hide')
+                    $("#ShowDiv3").css("line-height", "20px")
+                    open = false
+                    $("#ShowDiv3").html('<i class="fa fa-angle-up" aria-hidden="true"></i>')
+                }
+            }
+
+            function CargaComandos(Vehiculo, CveDispositivo) {
+                //  if (open) { FNShowDiv(); }
+                $("#HdnCveDipositivo").val(CveDispositivo)
+                $("#myModalLabel").text("Comando para vehículo: " + Vehiculo)
+                closeLastOpenedInfoWindow();
+                $("#divComandos").modal()
+                $("#C_BtnCargaComandos").click()
+            }
+
+
+            //Region GEOREFERENCIAS
+            var mcoords = [];
+            var markersg = [];
+            var s = "";
+            var nextSegment;
+
+            function PreparaDibujado(index) {
+                if ($("#ULTIMOPUNTODV").length <= 0) {
+                    var upControlDiv = document.createElement('div');
+                    var upControl = new ControlUltimoPunto(upControlDiv, map);
+                    upControlDiv.index = 1;
+                    upControlDiv.id = "ULTIMOPUNTODV"
+                    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(upControlDiv);
+                }
+                if ($("#DVSELECT").length <= 0) {
+                    var SelectControlDiv = document.createElement('div');
+                    var SelectControl = new ControlSelect(SelectControlDiv, map);
+                    SelectControlDiv.id = "DVSELECT"
+                    SelectControlDiv.index = 1;
+                    map.controls[google.maps.ControlPosition.TOP_LEFT].push(SelectControlDiv);
+                    map.addListener('click', addLatLng);
+                }
+
+                if ($("#DvGuardar").length <= 0) {
+                    var routeControlDiv = document.createElement('div');
+                    var routeControl = new ControlGuardarRuta(routeControlDiv, map);
+                    routeControlDiv.id = "DvGuardar"
+                    if (typeof (index) !== 'undefined') {
+                        routeControlDiv.index = index;
+                    }
+                    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(routeControlDiv);
+                }
+
+                if ($("#DvGuardarPI").length <= 0) {
+                    var routeControlDiv = document.createElement('div');
+                    var routeControl = new ControlGuardarPuntoInteres(routeControlDiv, map);
+                    routeControlDiv.id = "DvGuardarPI"
+                    if (typeof (index) !== 'undefined') {
+                        routeControlDiv.index = index + 1;
+                    }
+                    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(routeControlDiv);
+                }
+
+            }
+            function PreparaDibujadoHistorico() {
+                if ($("#DvGuardarHistorico").length <= 0) {
+                    var routeControlDiv = document.createElement('div');
+                    var routeControl = new ControlGuardarRutaHistorico(routeControlDiv, map);
+                    routeControlDiv.id = "DvGuardarHistorico"
+                    routeControlDiv.index = 2;
+                    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(routeControlDiv);
+                }
+            }
+
+            function TerminaDibujado() {
+                if ($("#ULTIMOPUNTODV").length > 0) {
+                    $("#ULTIMOPUNTODV").remove()
+                }
+                if ($("#DVSELECT").length > 0) {
+                    $("#DVSELECT").remove()
+                    google.maps.event.clearListeners(map, 'click');
+                    DeleteMarkersG();
+                }
+                if ($("#DvGuardar").length > 0) {
+                    $("#DvGuardar").remove()
+                }
+            }
+
+            function ControlUltimoPunto(controlDiv, map) {
+
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.style.backgroundColor = '#fff';
+                controlUI.style.border = '2px solid #fff';
+                controlUI.style.borderRadius = '3px';
+                controlUI.style.width = '165px'
+                controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+                controlUI.style.cursor = 'pointer';
+                controlUI.style.marginRight = '5px';
+                controlUI.style.marginTop = '5px';
+                controlUI.style.marginBottom = '22px';
+                controlUI.style.textAlign = 'center';
+                controlUI.title = 'Click para borrar el último punto dibujado';
+                controlDiv.appendChild(controlUI);
+
+                // Set CSS for the control interior.
+                var controlText = document.createElement('div');
+                controlText.style.color = 'rgb(25,25,25)';
+                controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
+                controlText.style.fontSize = '14px';
+                controlText.style.lineHeight = '38px';
+                controlText.style.paddingLeft = '5px';
+                controlText.style.paddingRight = '5px';
+                controlText.innerHTML = 'Borrar Último Punto';
+                controlUI.appendChild(controlText);
+
+                // Setup the click event listeners: simply set the map to Chicago.
+                controlUI.addEventListener('click', function () {
+                    EliminarUltimoPunto();
+                });
+
+            }
+
+            function ControlSelect(controlDiv, map) {
+
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.style.marginLeft = '10px';
+                controlUI.style.zIndex = '0';
+                controlUI.style.cursor = 'pointer';
+                // controlUI.style.position = 'absolute';
+                controlUI.style.left = "0px";
+                controlUI.style.width = "300px";
+                controlUI.style.marginTop = "10px"
+                controlUI.style.top = "0px";
+                controlUI.className = 'gmnoprint';
+
+                controlDiv.appendChild(controlUI);
+
+                var ControlSub1 = document.createElement('div')
+                ControlSub1.style.float = 'left';
+                ControlSub1.className = 'gm-style-mtc'
+                controlUI.appendChild(ControlSub1)
+
+                var ControlSub2 = document.createElement('div')
+                ControlSub2.style.direction = 'ltr';
+                ControlSub2.style.overflow = 'hidden';
+                ControlSub2.id = "Geocerca"
+                ControlSub2.style.textAlign = 'center';
+                ControlSub2.style.position = 'relative';
+                ControlSub2.style.color = 'rgb(0,0,0)';
+                ControlSub2.style.fontFamily = ' "Open Sans", sans-serif; ';
+                ControlSub2.style.msUserSelect = 'none;';
+                ControlSub2.style.fontSize = '11px'
+                ControlSub2.style.backgroundColor = 'rgb(255,255,255)'
+                ControlSub2.style.padding = '11px'
+                ControlSub2.style.backgroundClip = 'padding-box'
+                ControlSub2.style.minWidth = '28px'
+                ControlSub2.style.fontWeight = '500'
+                ControlSub2.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
+                ControlSub2.innerHTML = 'Geocerca'
+                ControlSub1.appendChild(ControlSub2)
+
+                var ControlSub3 = document.createElement('div')
+                ControlSub3.style.float = 'left';
+                ControlSub3.className = 'gm-style-mtc'
+                controlUI.appendChild(ControlSub3)
+
+                var ControlSub4 = document.createElement('div')
+                ControlSub4.style.direction = 'ltr';
+                ControlSub4.style.overflow = 'hidden';
+                ControlSub4.style.textAlign = 'center';
+                ControlSub4.id = "Georuta"
+                ControlSub4.style.position = 'relative';
+                ControlSub4.style.color = 'rgb(86,86,86)';
+                ControlSub4.style.fontFamily = ' "Open Sans", sans-serif; ';
+                ControlSub4.style.msUserSelect = 'none;';
+                ControlSub4.style.fontSize = '11px'
+                ControlSub4.style.backgroundColor = 'rgb(255,255,255)'
+                ControlSub4.style.padding = '11px'
+                ControlSub4.style.backgroundClip = 'padding-box'
+                ControlSub4.style.minWidth = '38px'
+                ControlSub4.style.fontWeight = '500'
+                ControlSub4.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
+                ControlSub4.style.borderLeft = '0px;'
+                ControlSub4.innerHTML = 'Georuta'
+                ControlSub3.appendChild(ControlSub4)
+
+                var ControlSub5 = document.createElement('div')
+                ControlSub5.style.float = 'left';
+                ControlSub5.className = 'gm-style-mtc'
+                controlUI.appendChild(ControlSub5)
+
+                var ControlSub6 = document.createElement('div')
+                ControlSub6.style.direction = 'ltr';
+                ControlSub6.style.overflow = 'hidden';
+                ControlSub6.style.textAlign = 'center';
+                ControlSub6.id = "PuntoInteres"
+                ControlSub6.style.position = 'relative';
+                ControlSub6.style.color = 'rgb(86,86,86)';
+                ControlSub6.style.fontFamily = ' "Open Sans", sans-serif; ';
+                ControlSub6.style.msUserSelect = 'none;';
+                ControlSub6.style.fontSize = '11px'
+                ControlSub6.style.backgroundColor = 'rgb(255,255,255)'
+                ControlSub6.style.padding = '11px'
+                ControlSub6.style.backgroundClip = 'padding-box'
+                ControlSub6.style.minWidth = '38px'
+                ControlSub6.style.fontWeight = '500'
+                ControlSub6.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
+                ControlSub6.style.borderLeft = '0px;'
+                ControlSub6.innerHTML = 'Punto de Interés'
+                ControlSub5.appendChild(ControlSub6)
+
+                // Setup the click event listeners: simply set the map to Chicago.
+                ControlSub5.addEventListener('click', function () {
+                    CambiaTipo('PuntoInteres');
+                });
+
+                ControlSub3.addEventListener('click', function () {
+                    CambiaTipo('Georuta');
+                });
+
+                ControlSub1.addEventListener('click', function () {
+                    CambiaTipo('Geocerca');
+                });
+
+            }
+
+            function ControlColor(controlDiv, map) {
+
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.style.backgroundColor = '#fff';
+                controlUI.style.border = '2px solid #fff';
+                controlUI.style.borderRadius = '3px';
+                controlUI.style.pointer = '3px';
+                controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+                controlUI.style.cursor = 'pointer';
+                controlUI.style.marginLeft = '10px';
+                controlUI.style.marginTop = '5px';
+                controlUI.style.marginBottom = '22px';
+                controlUI.style.textAlign = 'center';
+                controlUI.style.color = 'rgb(25,25,25)';
+                controlUI.style.fontFamily = ' "Open Sans", sans-serif; ';
+                controlUI.style.fontSize = '14px';
+                controlUI.style.paddingLeft = '5px';
+                controlUI.style.paddingRight = '5px';
+                controlUI.innerHTML = 'Cambiar Color '
+                controlUI.title = 'Click para cambiar el color del polygono';
+                controlDiv.appendChild(controlUI);
+
+                // Set CSS for the control interior.
+                var controlText = document.createElement('input');
+                controlText.type = 'hidden';
+                controlText.id = 'hidden-input'
+                controlText.className = 'demo'
+                controlText.value = '#0088FF'
+                controlText.onchange = function () { CambiaColor(); };
+                controlUI.appendChild(controlText);
+
+                // Setup the click event listeners: simply set the map to Chicago.
+                controlUI.addEventListener('click', function () {
+                    ComponentsColorPickers.init();
+                });
+
+
+            }
+
+            function ControlGuardarRuta(controlDiv, map) {
+
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.id = "btnGuardarRuta"
+                controlUI.style.display = 'none';
+                controlUI.style.backgroundColor = '#4B77BE';
+                controlUI.style.color = "#fff";
+                controlUI.style.borderRadius = '3px';
+                controlUI.style.width = '165px'
+                controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+                controlUI.style.cursor = 'pointer';
+                controlUI.style.marginRight = '5px';
+                controlUI.style.marginTop = '5px';
+                controlUI.style.marginBottom = '22px';
+                controlUI.style.textAlign = 'center';
+                controlUI.title = 'Guardar la ruta trazada como georeferencia';
+                controlDiv.appendChild(controlUI);
+
+                // Set CSS for the control interior.
+                var controlText = document.createElement('div');
+                controlText.style.color = '#fff';
+                controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
+                controlText.style.fontSize = '14px';
+                controlText.style.lineHeight = '38px';
+                controlText.style.paddingLeft = '5px';
+                controlText.style.paddingRight = '5px';
+                controlText.innerHTML = 'Guardar GeoReferencia';
+                controlUI.appendChild(controlText);
+
+                // Setup the click event listeners: simply set the map to Chicago.
+                controlUI.addEventListener('click', function () {
+                    var r = polygon.getPath();
+                    var s = "";
+                    r.forEach(function (xy, i) { s += xy.lng() + ' ' + xy.lat() + ',' })
+                    //s += r.j[0].lng() + ' ' + r.j[0].lat();
+                    $("#GeoCerca").val(s);
+
+                    $("#divAgregarGeoreferencia").modal();
+                    $("#C_TxtNombre").val("")
+                    $("#C_TxtTolerancia").val("")
+                    $("#C_TxtFechaFG").val("")
+                    $("#C_TxtFechaIG").val("")
+                    $(".geo").checked = false
+                });
+
+            }
+            function CargaVehiculosHistoricos() {
+                var data = [];
+                for (var i = 0; i < geoRutasHistoricas.length; i++) {
+                    var dato = {
+                        id: geoRutasHistoricas[i].ValueEquipo,
+                        text: geoRutasHistoricas[i].NombreEquipo
+                    };
+                    data.push(dato);
+                }
+
+                $("#C_DdlEquipoHis").select2({
+                    data: data
+                });
+
+                $('#C_DdlEquipoHis').on('select2:select', function (e) {
+                    var geoRuta = geoRutasHistoricas.filter(function (item) { return (item.ValueEquipo == parseInt($("#C_DdlEquipoHis").val())); })
+                    if (geoRuta.length = 1) {
+                        $("#GeoRutaHistorico").val(JSON.stringify(geoRuta[0]));
+                    }
+
+                });
+                $("#C_TxtNombreHis").val("")
+                $("#C_TxtToleHis").val("")
+                $("#C_TxtFechaIHis").val("")
+                $("#C_TxtFechaFHis").val("")
+                $(".geo").checked = false
+            }
+            var geoRutasHistoricas = [];
+            function ControlGuardarRutaHistorico(controlDiv, map) {
+
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.id = "btnGuardarRutaHistorico"
+                //controlUI.style.display = 'none';
+                controlUI.style.backgroundColor = '#4B77BE';
+                controlUI.style.color = "#fff";
+                controlUI.style.borderRadius = '3px';
+                controlUI.style.width = '165px'
+                controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+                controlUI.style.cursor = 'pointer';
+                controlUI.style.marginRight = '5px';
+                controlUI.style.marginTop = '5px';
+                controlUI.style.marginBottom = '22px';
+                controlUI.style.textAlign = 'center';
+                controlUI.title = 'Guardar la ruta trazada como georeferencia';
+                controlDiv.appendChild(controlUI);
+
+                // Set CSS for the control interior.
+                var controlText = document.createElement('div');
+                controlText.style.color = '#fff';
+                controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
+                controlText.style.fontSize = '14px';
+                controlText.style.lineHeight = '38px';
+                controlText.style.paddingLeft = '5px';
+                controlText.style.paddingRight = '5px';
+                controlText.innerHTML = 'Guardar Ruta';
+                controlUI.appendChild(controlText);
+
+                // Setup the click event listeners: simply set the map to Chicago.
+                controlUI.addEventListener('click', function () {
+
+                    CargaVehiculosHistoricos();
+
+                    $("#divAgregarGeoreferenciaHistorico").modal('show');
+
+                    if (geoRutasHistoricas.length > 0) {
+                        $('#C_DdlEquipoHis').val(geoRutasHistoricas[0].ValueEquipo).trigger('change.select2');
+                        $("#GeoRutaHistorico").val(JSON.stringify(geoRutasHistoricas[0]));
+                    }
+                });
+
+            }
+
+            function ControlGuardarPuntoInteres(controlDiv, map) {
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.id = "btnGuardarPuntoInteres"
+                controlUI.style.display = 'none';
+                controlUI.style.backgroundColor = '#4B77BE';
+                controlUI.style.color = "#fff";
+                controlUI.style.borderRadius = '3px';
+                controlUI.style.width = '165px'
+                controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+                controlUI.style.cursor = 'pointer';
+                controlUI.style.marginRight = '5px';
+                controlUI.style.marginTop = '5px';
+                controlUI.style.marginBottom = '22px';
+                controlUI.style.textAlign = 'center';
+                controlUI.title = 'Guardar el punto de interés';
+                controlDiv.appendChild(controlUI);
+
+                // Set CSS for the control interior.
+                var controlText = document.createElement('div');
+                controlText.style.color = '#fff';
+                controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
+                controlText.style.fontSize = '14px';
+                controlText.style.lineHeight = '38px';
+                controlText.style.paddingLeft = '5px';
+                controlText.style.paddingRight = '5px';
+                controlText.innerHTML = 'Guardar Punto de Interés';
+                controlUI.appendChild(controlText);
+
+                // Setup the click event listeners: simply set the map to Chicago.
+                controlUI.addEventListener('click', function () {
+
+                    $("#C_TxtNombrePI").val("")
+                    $("#C_TxtDescripcion").val("")
+                    $("#HdnGrupo").val("-1");
+                    $("#GeoCerca").val("");
+
+                    if (markersg.length > 0) {
+                        var punto = "(" + markersg[0].position.lng() + ' ' + markersg[0].position.lat() + ")";
+                        $("#GeoCerca").val(punto);
+                        $("#DivAgregarPuntoInteres").modal({ backdrop: 'static', keyboard: false });
+                    } else {
+                        alert("No hay puntos de interés en el mapa");
+                    }
+                });
+
+            }
+            var indiceAnterior = 0;
+            function CargaDatosSeleccionados(indice, valor) {
+                var columnaSeleccionada = 2 + indice;
+                $('#HdnGrupo').val(valor);
+                $('#C_GvGrupos tr').filter(':nth-child(' + indiceAnterior + ')').css('background-color', 'initial');
+                $('#C_GvGrupos tr').filter(':nth-child(' + columnaSeleccionada + ')').css('background-color', '#F5B27A');
+                indiceAnterior = columnaSeleccionada;
+            }
+
+            function CambiaTipo(Tipo) {
+                DeleteMarkersG();
+                if (Tipo === 'Geocerca') {
+                    $("#HdnTipo").val('Geocerca')
+                    $("#Geocerca").css("font-weight", "bold")
+                    $("#Georuta").css("font-weight", "normal")
+                    $("#PuntoInteres").css("font-weight", "normal")
+                } else if (Tipo === 'Georuta') {
+                    $("#HdnTipo").val('Georuta')
+                    $("#Geocerca").css("font-weight", "normal")
+                    $("#Georuta").css("font-weight", "bold")
+                    $("#PuntoInteres").css("font-weight", "normal")
+                } else if (Tipo === 'PuntoInteres') {
+                    $("#HdnTipo").val('PuntoInteres')
+                    $("#Geocerca").css("font-weight", "normal")
+                    $("#Georuta").css("font-weight", "normal")
+                    $("#PuntoInteres").css("font-weight", "bold")
+                }
+            }
+
+            function addLatLng(event) {
+                //SOLO SE PUEDE AGREGAR UN PUNTO DE INTERES A LA VEZ
+                if (markersg.length >= 1 && $("#HdnTipo").val() === 'PuntoInteres') {
+                    $("#btnGuardarPuntoInteres").css("display", "")
+                    return;
+                }
+
+                var lat = event.latLng.lat();
+                var lng = event.latLng.lng();
+                mcoords.push(event.latLng)
+
+                var info = new google.maps.InfoWindow({
+                    content: "(" + lat + " " + lng + ")"
+                });
+
+                var marker = new google.maps.Marker({
+                    position: event.latLng,
+                    title: 'Punto',
+                    map: map
+                });
+                markersg.push(marker);
+                marker.addListener('click', function () {
+                    info.open(map, marker);
+                });
+
                 if ($("#HdnTipo").val() === 'Georuta') {
-                    if (markersg.length >= 2) {
-                        CreaRuta();
-                    } else { directionsDisplay.setMap(null); $("#btnGuardarRuta").css("display", "none"); }
+                    if (markersg.length > 1) {
+                        CreaRuta();
+                        $("#btnGuardarRuta").css("display", "")
+                    }
                 }
                 else if ($("#HdnTipo").val() === 'Geocerca') {
-                    if (typeof polygon != 'undefined') {
-                        polygon.setMap(null);
-                        if (markersg.length >= 3) {
-                            creaPoligono($("#hidden-input").val());
-                        } else {
-                            $("#btnGuardarRuta").css("display", "none")
-                        }
+                    var h = $('#GeoCerca').val() + lng + " " + lat + ","
+                    $('#GeoCerca').val(h)
+                    if (markersg.length == 1) {
+                        $('#CommandArg').val(lng + " " + lat)
                     }
-                    var h;
-                    $('#GeoCerca').val('')
-                    for (var i = 0; i < mcoords.length; i++) {
-                        var lat = mcoords[i].lat()
-                        var lng = mcoords[i].lng()
-                        h = $('#GeoCerca').val() + lng + " " + lat + ","
-                        $('#GeoCerca').val(h)
-                        if (i === 0) {
-                            $('#CommandArg').val(lng + " " + lat)
+                    if (markersg.length === 3) {
+                        creaPoligono();
+                        $("#btnGuardarRuta").css("display", "")
+                    } else if (markersg.length > 3) {
+                        var path = polygon.getPath();
+                        path.push(event.latLng)
+                    }
+                } else if ($("#HdnTipo").val() === 'PuntoInteres') {
+                    if (markersg.length > 0) {
+                        $("#btnGuardarPuntoInteres").css("display", "")
+                    }
+                }
+
+            }
+
+            function creaPoligono() {
+                polygon = new google.maps.Polygon({
+                    paths: mcoords,
+                    strokeColor: "#0088FF",
+                    strokeOpacity: 0.8,
+                    strokeWeight: 2,
+                    fillColor: "#0088FF",
+                    fillOpacity: 0.35,
+                    editable: true
+                });
+                polygon.setMap(map);
+                $("#C_BtnCrear").prop('disabled', false);
+            }
+
+            function CreaRuta() {
+                var start = markersg[0].position;
+                var end = markersg[markersg.length - 1].position;
+                var waypts = [];
+                s = ""
+
+                for (var i = 1; i < markersg.length - 1; i++) {
+                    waypts.push({
+                        location: markersg[i].position,
+                        stopover: true
+                    });
+                }
+                directionsService.route({
+                    origin: start,
+                    destination: end,
+                    travelMode: 'DRIVING',
+                    waypoints: waypts
+                }, function (response, status) {
+                    if (status === 'OK') {
+                        directionsDisplay.setDirections(response);
+                        directionsDisplay.setMap(map);
+
+                        var legs = response.routes[0].legs;
+                        for (i = 0; i < legs.length; i++) {
+                            var steps = legs[i].steps;
+                            for (j = 0; j < steps.length; j++) {
+                                var nextSegment = steps[j].path;
+                                for (k = 0; k < nextSegment.length; k++) {
+                                    s = s + nextSegment[k] + '+'
+                                }
+                            }
+                        }
+                        $('#CommandArg').val(s);
+                    } else {
+                        window.alert('Directions request failed due to ' + status);
+                    }
+                });
+            }
+
+            function EliminarUltimoPunto() {
+                if (markersg.length > 0) {
+                    markersg[markersg.length - 1].setMap(null)
+                    markersg.splice((markersg.length - 1), 1);
+                    mcoords.splice((mcoords.length - 1), 1);
+
+                    if ($("#HdnTipo").val() === 'Georuta') {
+                        if (markersg.length >= 2) {
+                            CreaRuta();
+                        } else { directionsDisplay.setMap(null); $("#btnGuardarRuta").css("display", "none"); }
+                    } else if ($("#HdnTipo").val() === 'Geocerca') {
+                        if (typeof polygon != 'undefined') {
+                            polygon.setMap(null);
+                            if (markersg.length >= 3) {
+                                creaPoligono($("#hidden-input").val());
+                            } else {
+                                $("#btnGuardarRuta").css("display", "none")
+                            }
+                        }
+                        var h;
+                        $('#GeoCerca').val('')
+                        for (var i = 0; i < mcoords.length; i++) {
+                            var lat = mcoords[i].lat()
+                            var lng = mcoords[i].lng()
+                            h = $('#GeoCerca').val() + lng + " " + lat + ","
+                            $('#GeoCerca').val(h)
+                            if (i === 0) {
+                                $('#CommandArg').val(lng + " " + lat)
+                            }
+                        }
+                    } else if ($("#HdnTipo").val() === 'PuntoInteres') {
+                        if (markersg.length <= 0) {
+                            $("#btnGuardarPuntoInteres").css("display", "none")
                         }
                     }
                 }
-            }
-        }
-
-        function DeleteMarkersG() {
-            for (var i = 0; i < markersg.length; i++) {
-                markersg[i].setMap(null);
             }
-            markersg = [];
-            directionsDisplay.setMap(null);
-            mcoords = [];
-            $('#GeoCerca').val('')
-            if (typeof polygon != 'undefined') {
-                polygon.setMap(null);
-            }
-            $("#btnGuardarRuta").css("display", "none")
-        }
 
-        function CambiaColor() {
-            $("#C_TxtColor").val($("#hidden-input").val())
-        }
-        function CambiaColorH() {
-            $("#C_TxtColorH").val($("#hidden-input-Hist").val())
-        }
-
-        function Limpieza() {
-            DeleteMarkersG();
-            //$('#C_TxtHoraI').datetimepicker({
-            //    datepicker: false,
-            //    lang: 'es',
-            //    format: 'H:i',
-            //    formatDate: 'H:i',
-            //    step: 30
-            //});
-            //$('#C_TxtHoraF').datetimepicker({
-            //    datepicker: false,
-            //    lang: 'es',
-            //    format: 'H:i',
-            //    formatDate: 'H:i',
-            //    step: 30
-            //});
-            $('#divAgregarGeoreferencia').modal('hide');
-        }
-        function ControlLabels(controlDiv, map) {
-
-            // Set CSS for the control border.
-            var controlUI = document.createElement('div');
-            controlUI.style.marginLeft = '10px';
-            controlUI.style.zIndex = '0';
-            controlUI.style.cursor = 'pointer';
-            // controlUI.style.position = 'absolute';
-            controlUI.style.left = "0px";
-            controlUI.style.width = "150px";
-            controlUI.style.marginTop = "10px"
-            controlUI.style.top = "0px";
-            controlUI.className = 'gmnoprint';
-
-            controlDiv.appendChild(controlUI);
-
-            var ControlSub1 = document.createElement('div')
-            ControlSub1.style.float = 'left';
-            ControlSub1.className = 'gm-style-mtc'
-            controlUI.appendChild(ControlSub1)
-
-            var ControlSub2 = document.createElement('div')
-            ControlSub2.style.direction = 'ltr';
-            ControlSub2.style.overflow = 'hidden';
-            ControlSub2.id = "LnkEtiquetas"
-            ControlSub2.style.textAlign = 'center';
-            ControlSub2.style.position = 'relative';
-            ControlSub2.style.color = 'rgb(0,0,0)';
-            ControlSub2.style.fontFamily = ' "Open Sans", sans-serif; ';
-            ControlSub2.style.msUserSelect = 'none;';
-            ControlSub2.style.fontSize = '11px'
-            ControlSub2.style.backgroundColor = 'rgb(255,255,255)'
-            ControlSub2.style.padding = '11px'
-            ControlSub2.style.backgroundClip = 'padding-box'
-            ControlSub2.style.minWidth = '28px'
-            ControlSub2.style.fontWeight = '500'
-            ControlSub2.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
-            ControlSub2.innerHTML = 'Mostrar Etiquetas'
-            ControlSub1.appendChild(ControlSub2)
-
-            ControlSub1.addEventListener('click', function () {
-                EscondeLabels();
-            });
-
-        }
-        function ControlGeocercas(controlDiv, map) {
-
-            // Set CSS for the control border.
-            var controlUI = document.createElement('div');
-            controlUI.style.marginLeft = '10px';
-            controlUI.style.zIndex = '0';
-            controlUI.style.cursor = 'pointer';
-            // controlUI.style.position = 'absolute';
-            controlUI.style.left = "0px";
-            controlUI.style.width = "150px";
-            controlUI.style.marginTop = "10px"
-            controlUI.style.top = "0px";
-            controlUI.className = 'gmnoprint';
-
-            controlDiv.appendChild(controlUI);
-
-            var ControlSub1 = document.createElement('div')
-            ControlSub1.style.float = 'left';
-            ControlSub1.className = 'gm-style-mtc'
-            controlUI.appendChild(ControlSub1)
-
-            var ControlSub2 = document.createElement('div')
-            ControlSub2.style.direction = 'ltr';
-            ControlSub2.style.overflow = 'hidden';
-            ControlSub2.id = "LnkMostarGeocercas"
-            ControlSub2.style.textAlign = 'center';
-            ControlSub2.style.position = 'relative';
-            ControlSub2.style.color = 'rgb(0,0,0)';
-            ControlSub2.style.fontFamily = ' "Open Sans", sans-serif; ';
-            ControlSub2.style.msUserSelect = 'none;';
-            ControlSub2.style.fontSize = '11px'
-            ControlSub2.style.display = 'none'
-            ControlSub2.style.backgroundColor = 'rgb(255,255,255)'
-            ControlSub2.style.padding = '11px'
-            ControlSub2.style.backgroundClip = 'padding-box'
-            ControlSub2.style.minWidth = '28px'
-            ControlSub2.style.fontWeight = '500'
-            ControlSub2.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
-            ControlSub2.innerHTML = 'Mostrar Geocercas'
-            ControlSub1.appendChild(ControlSub2)
-
-            ControlSub1.addEventListener('click', function () {
-                VerGeocercas();
-            });
-
-        }
-
-
-        var visible = false
-        function EscondeLabels() {
-
-            if (visible) {
-                for (var i = 0; i < markers.length; i++) {
-                    markers[i].setLabel(null);
+            function DeleteMarkersG() {
+                for (var i = 0; i < markersg.length; i++) {
+                    markersg[i].setMap(null);
                 }
-                visible = false
-            } else {
-                for (var i = 0; i < markers.length; i++) {
-                    var label = {
-                        text: markers[i].Nombre,
-                        fontSize: "12px",
-                        color: 'black',
-                        fontWeight: 'bolder'
+                markersg = [];
+                directionsDisplay.setMap(null);
+                mcoords = [];
+                $('#GeoCerca').val('')
+                if (typeof polygon != 'undefined') {
+                    polygon.setMap(null);
+                }
+                $("#btnGuardarRuta").css("display", "none");
+                $("#btnGuardarPuntoInteres").css("display", "none");
+            }
+
+            function CambiaColor() {
+                $("#C_TxtColor").val($("#hidden-input").val())
+            }
+            function CambiaColorH() {
+                $("#C_TxtColorH").val($("#hidden-input-Hist").val())
+            }
+
+            function Limpieza() {
+                DeleteMarkersG();
+                //$('#C_TxtHoraI').datetimepicker({
+                //    datepicker: false,
+                //    lang: 'es',
+                //    format: 'H:i',
+                //    formatDate: 'H:i',
+                //    step: 30
+                //});
+                //$('#C_TxtHoraF').datetimepicker({
+                //    datepicker: false,
+                //    lang: 'es',
+                //    format: 'H:i',
+                //    formatDate: 'H:i',
+                //    step: 30
+                //});
+                $('#divAgregarGeoreferencia').modal('hide');
+            }
+            function ControlLabels(controlDiv, map) {
+
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.style.marginLeft = '10px';
+                controlUI.style.zIndex = '0';
+                controlUI.style.cursor = 'pointer';
+                // controlUI.style.position = 'absolute';
+                controlUI.style.left = "0px";
+                controlUI.style.width = "150px";
+                controlUI.style.marginTop = "10px"
+                controlUI.style.top = "0px";
+                controlUI.className = 'gmnoprint';
+
+                controlDiv.appendChild(controlUI);
+
+                var ControlSub1 = document.createElement('div')
+                ControlSub1.style.float = 'left';
+                ControlSub1.className = 'gm-style-mtc'
+                controlUI.appendChild(ControlSub1)
+
+                var ControlSub2 = document.createElement('div')
+                ControlSub2.style.direction = 'ltr';
+                ControlSub2.style.overflow = 'hidden';
+                ControlSub2.id = "LnkEtiquetas"
+                ControlSub2.style.textAlign = 'center';
+                ControlSub2.style.position = 'relative';
+                ControlSub2.style.color = 'rgb(0,0,0)';
+                ControlSub2.style.fontFamily = ' "Open Sans", sans-serif; ';
+                ControlSub2.style.msUserSelect = 'none;';
+                ControlSub2.style.fontSize = '11px'
+                ControlSub2.style.backgroundColor = 'rgb(255,255,255)'
+                ControlSub2.style.padding = '11px'
+                ControlSub2.style.backgroundClip = 'padding-box'
+                ControlSub2.style.minWidth = '28px'
+                ControlSub2.style.fontWeight = '500'
+                ControlSub2.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
+                ControlSub2.innerHTML = 'Mostrar Etiquetas'
+                ControlSub1.appendChild(ControlSub2)
+
+                ControlSub1.addEventListener('click', function () {
+                    EscondeLabels();
+                });
+
+            }
+            function ControlGeocercas(controlDiv, map) {
+
+                // Set CSS for the control border.
+                var controlUI = document.createElement('div');
+                controlUI.style.marginLeft = '10px';
+                controlUI.style.zIndex = '0';
+                controlUI.style.cursor = 'pointer';
+                // controlUI.style.position = 'absolute';
+                controlUI.style.left = "0px";
+                controlUI.style.width = "150px";
+                controlUI.style.marginTop = "10px"
+                controlUI.style.top = "0px";
+                controlUI.className = 'gmnoprint';
+
+                controlDiv.appendChild(controlUI);
+
+                var ControlSub1 = document.createElement('div')
+                ControlSub1.style.float = 'left';
+                ControlSub1.className = 'gm-style-mtc'
+                controlUI.appendChild(ControlSub1)
+
+                var ControlSub2 = document.createElement('div')
+                ControlSub2.style.direction = 'ltr';
+                ControlSub2.style.overflow = 'hidden';
+                ControlSub2.id = "LnkMostarGeocercas"
+                ControlSub2.style.textAlign = 'center';
+                ControlSub2.style.position = 'relative';
+                ControlSub2.style.color = 'rgb(0,0,0)';
+                ControlSub2.style.fontFamily = ' "Open Sans", sans-serif; ';
+                ControlSub2.style.msUserSelect = 'none;';
+                ControlSub2.style.fontSize = '11px'
+                ControlSub2.style.display = 'none'
+                ControlSub2.style.backgroundColor = 'rgb(255,255,255)'
+                ControlSub2.style.padding = '11px'
+                ControlSub2.style.backgroundClip = 'padding-box'
+                ControlSub2.style.minWidth = '28px'
+                ControlSub2.style.fontWeight = '500'
+                ControlSub2.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
+                ControlSub2.innerHTML = 'Mostrar Geocercas'
+                ControlSub1.appendChild(ControlSub2)
+
+                ControlSub1.addEventListener('click', function () {
+                    VerGeocercas();
+                });
+
+            }
+
+
+            var visible = false
+            function EscondeLabels() {
+
+                if (visible) {
+                    for (var i = 0; i < markers.length; i++) {
+                        markers[i].setLabel(null);
                     }
-                    markers[i].setLabel(label);
+                    visible = false
+                } else {
+                    for (var i = 0; i < markers.length; i++) {
+                        var label = {
+                            text: markers[i].Nombre,
+                            fontSize: "12px",
+                            color: 'black',
+                            fontWeight: 'bolder'
+                        }
+                        markers[i].setLabel(label);
+                    }
+                    visible = true
                 }
-                visible = true
-            }
-            for (var i = 0; i < markers.length; i++) {
-                markers[i].setMap(null);
-            }
-            for (var i = 0; i < markers.length; i++) {
-                markers[i].setMap(map);
-            }
-        }
-
-        //END REGION
-
-        //REGION GEOCERCAS
-        var polygonsGeocercas = [];
-        var markersGeo = [];
-
-        var IsGeoVisibles = false;
-
-        function VerGeocercas() {
-            if (IsGeoVisibles) {
-                HideGeocercas();
-                IsGeoVisibles = false;
-            } else {
-                CargaGeocercas();
-                IsGeoVisibles = true;
-            }
-        }
-        function CargaGeocercas() {
-            for (var i = 0; i < polygonsGeocercas.length; i++) {
-                polygonsGeocercas[i].setMap(map);
-            }
-            for (var j = 0; j < markersGeo.length; j++) {
-                markersGeo[j].setMap(map);
-            }
-        }
-
-        function DeleteGeocercas() {
-            for (var i = 0; i < polygonsGeocercas.length; i++) {
-                polygonsGeocercas[i].setMap(null);
-            }
-            for (var j = 0; j < markersGeo.length; j++) {
-                markersGeo[j].setMap(null);
-            }
-            polygonsGeocercas = [];
-            markersGeo = [];
-        }
-        function HideGeocercas() {
-            for (var i = 0; i < polygonsGeocercas.length; i++) {
-                polygonsGeocercas[i].setMap(null);
-            }
-            for (var j = 0; j < markersGeo.length; j++) {
-                markersGeo[j].setMap(null);
-            }
-        }
-        function creaPoligonoGeocerca(coords, color, Geocerca) {
-            var polygon = new google.maps.Polygon({
-                paths: coords,
-                strokeColor: color,
-                strokeOpacity: 0.8,
-                strokeWeight: 2,
-                fillColor: color,
-                fillOpacity: 0.35
-            });
-            polygonsGeocercas.push(polygon);
-            CreaMarcadorPoligonoGeocerca(coords, Geocerca);
-        }
-        function CreaMarcadorPoligonoGeocerca(coords, GeoCerca) {
-            var bounds = new google.maps.LatLngBounds();
-            for (i = 0; i < coords.length; i++) {
-                bounds.extend(coords[i]);
-            }
-
-            var marker = new google.maps.Marker({
-                position: bounds.getCenter(),
-                title: GeoCerca
-            });
-
-            var infowindow = new google.maps.InfoWindow({
-                content: '<h4><b>' + GeoCerca + '</b></h4>'
-            });
-
-            marker.addListener('click', function () {
-                closeLastOpenedInfoWindow();
-                infowindow.open(map, marker);
-                lastOpenedInfoWindow = infowindow;
-            });
-
-            markersGeo.push(marker);
-        }
-        //END REGION
-
-        //REGION PARADAS
-        var polygonsParadas = [];
-        var markersParadas = [];
-
-        function creaPoligonoParada(coords, color, Geocerca) {
-            var polygon = new google.maps.Polygon({
-                paths: coords,
-                strokeColor: color,
-                strokeOpacity: 0.8,
-                strokeWeight: 2,
-                fillColor: color,
-                fillOpacity: 0.35
-            });
-            polygon.setMap(map);
-            polygonsParadas.push(polygon);
-            CreaMarcadorPoligonoParada(coords, Geocerca);
-        }
-
-        function CreaMarcadorPoligonoParada(coords, GeoCerca) {
-            var bounds = new google.maps.LatLngBounds();
-            for (i = 0; i < coords.length; i++) {
-                bounds.extend(coords[i]);
-            }
-
-            var marker = new google.maps.Marker({
-                position: bounds.getCenter(),
-                title: GeoCerca,
-                map: map
-            });
-
-            var infowindow = new google.maps.InfoWindow({
-                content: '<h4><b>' + GeoCerca + '</b></h4>'
-            });
-
-            marker.addListener('click', function () {
-                closeLastOpenedInfoWindow();
-                infowindow.open(map, marker);
-                lastOpenedInfoWindow = infowindow;
-            });
-
-            markersParadas.push(marker);
-        }
-        function DeletemarkersParadas() {
-            for (var i = 0; i < markersParadas.length; i++) {
-                markersParadas[i].setMap(null);
-            }
-            markersParadas = [];
-            for (var j = 0; j < polygonsParadas.length; j++) {
-                if (typeof polygonsParadas[j] != 'undefined') {
-                    polygonsParadas[j].setMap(null);
+                for (var i = 0; i < markers.length; i++) {
+                    markers[i].setMap(null);
+                }
+                for (var i = 0; i < markers.length; i++) {
+                    markers[i].setMap(map);
                 }
             }
-            polygonsParadas = [];
 
-        }
-        //END REGION
+            //END REGION
 
-        //REGION GEOCERCAS EN RASTREO CONTINUO
-        var polygonsGeoRastreo = [];
-        var markersGeoRastreo = [];
+            //REGION GEOCERCAS
+            var polygonsGeocercas = [];
+            var markersGeo = [];
 
-        function creaPoligonoGeoRastreo(coords, color, Geocerca) {
-            var polygon = new google.maps.Polygon({
-                paths: coords,
-                strokeColor: color,
-                strokeOpacity: 0.8,
-                strokeWeight: 2,
-                fillColor: color,
-                fillOpacity: 0.35
-            });
-            polygon.setMap(map);
-            polygonsGeoRastreo.push(polygon);
-            CreaMarcadorPoligonoGeoRastreo(coords, Geocerca);
-        }
+            var IsGeoVisibles = false;
 
-        function CreaMarcadorPoligonoGeoRastreo(coords, GeoCerca) {
-            var bounds = new google.maps.LatLngBounds();
-            for (i = 0; i < coords.length; i++) {
-                bounds.extend(coords[i]);
-            }
-
-            var marker = new google.maps.Marker({
-                position: bounds.getCenter(),
-                title: GeoCerca,
-                map: map
-            });
-
-            var infowindow = new google.maps.InfoWindow({
-                content: '<h4><b>' + GeoCerca + '</b></h4>'
-            });
-
-            marker.addListener('click', function () {
-                closeLastOpenedInfoWindow();
-                infowindow.open(map, marker);
-                lastOpenedInfoWindow = infowindow;
-            });
-
-            markersGeoRastreo.push(marker);
-        }
-        function DeletemarkersGeoRastreo() {
-            for (var i = 0; i < markersGeoRastreo.length; i++) {
-                markersGeoRastreo[i].setMap(null);
-            }
-            markersGeoRastreo = [];
-            for (var j = 0; j < polygonsGeoRastreo.length; j++) {
-                if (typeof polygonsGeoRastreo[j] != 'undefined') {
-                    polygonsGeoRastreo[j].setMap(null);
+            function VerGeocercas() {
+                if (IsGeoVisibles) {
+                    HideGeocercas();
+                    IsGeoVisibles = false;
+                } else {
+                    CargaGeocercas();
+                    IsGeoVisibles = true;
                 }
             }
-            polygonsGeoRastreo = [];
-
-        }
-        //END REGION
-        function myfunction() {
-            var arrayOfStrings = HdnTextFilter.value.split("");
-            for (var i = 0; i < arrayOfStrings.length; i++) {
-                var e = jQuery.Event("keypress");
-                e.which = arrayOfStrings[i].charCodeAt(0);; // m code value
-                e.altKey = true; // Alt key pressed
-                $("#C_GvBarra_filter > div > input").trigger(e);
-            }
-        }
-
-        function CargaHistorico() {
-            debugger;
-            var datos = JSON.parse(HdnJSScript.value);
-
-            eval(datos.MarcadoresScript);
-            eval(datos.PolylineScript);
-        }
-
-        function GvBarraPaginator() {
-            $('.table.PaginarGV').each(function () {
-                var Tthis = $(this);
-                if (!$.fn.DataTable.isDataTable(Tthis) && Tthis.find("th").length > 0) {
-                    Tthis.prepend(("<thead></thead>"));
-                    Tthis.find('thead').append($("#C_GvBarra").find("tr:first"));
-                    var table = Tthis.DataTable({
-                        //data: datasource,
-                        //columns: [
-                        //   { title: "Vehiculo" },
-                        //   { title: "Fecha" },
-                        //   { title: "TiempoDetenido" },
-                        //   { title: "Extn." },
-                        //   { title: "Start date" },
-                        //   { title: "Salary" }
-                        //],
-                        deferRender: true,
-                        deferLoading: 100,
-                        scrollY: 130,
-                        scrollCollapse: true,
-                        scroller: {
-                            displayBuffer: 20
-                        },
-                        ordering: true
-                    });
-                    var tkeys = new $.fn.dataTable.KeyTable(table, {
-                        // options
-                    });
-                    var parent = Tthis.parent().parent().parent();
-                    $('.dataTables_scrollHeadInner > .table.ADScrollPaginator2').find('th').addClass('importantth');
-                    parent.find(".dataTables_paginate").css("display", "none");
-                    parent.find(".dataTables_length").css("display", "none");
+            function CargaGeocercas() {
+                for (var i = 0; i < polygonsGeocercas.length; i++) {
+                    polygonsGeocercas[i].setMap(map);
+                }
+                for (var j = 0; j < markersGeo.length; j++) {
+                    markersGeo[j].setMap(map);
                 }
-            });
-        }
+            }
+
+            function DeleteGeocercas() {
+                for (var i = 0; i < polygonsGeocercas.length; i++) {
+                    polygonsGeocercas[i].setMap(null);
+                }
+                for (var j = 0; j < markersGeo.length; j++) {
+                    markersGeo[j].setMap(null);
+                }
+                polygonsGeocercas = [];
+                markersGeo = [];
+            }
+            function HideGeocercas() {
+                for (var i = 0; i < polygonsGeocercas.length; i++) {
+                    polygonsGeocercas[i].setMap(null);
+                }
+                for (var j = 0; j < markersGeo.length; j++) {
+                    markersGeo[j].setMap(null);
+                }
+            }
+            function creaPoligonoGeocerca(coords, color, Geocerca) {
+                var polygon = new google.maps.Polygon({
+                    paths: coords,
+                    strokeColor: color,
+                    strokeOpacity: 0.8,
+                    strokeWeight: 2,
+                    fillColor: color,
+                    fillOpacity: 0.35
+                });
+                polygonsGeocercas.push(polygon);
+                CreaMarcadorPoligonoGeocerca(coords, Geocerca);
+            }
+            function CreaMarcadorPoligonoGeocerca(coords, GeoCerca) {
+                var bounds = new google.maps.LatLngBounds();
+                for (i = 0; i < coords.length; i++) {
+                    bounds.extend(coords[i]);
+                }
+
+                var marker = new google.maps.Marker({
+                    position: bounds.getCenter(),
+                    title: GeoCerca
+                });
+
+                var infowindow = new google.maps.InfoWindow({
+                    content: '<h4><b>' + GeoCerca + '</b></h4>'
+                });
+
+                marker.addListener('click', function () {
+                    closeLastOpenedInfoWindow();
+                    infowindow.open(map, marker);
+                    lastOpenedInfoWindow = infowindow;
+                });
+
+                markersGeo.push(marker);
+            }
+            //END REGION
+
+            //REGION PARADAS
+            var polygonsParadas = [];
+            var markersParadas = [];
+
+            function creaPoligonoParada(coords, color, Geocerca) {
+                var polygon = new google.maps.Polygon({
+                    paths: coords,
+                    strokeColor: color,
+                    strokeOpacity: 0.8,
+                    strokeWeight: 2,
+                    fillColor: color,
+                    fillOpacity: 0.35
+                });
+                polygon.setMap(map);
+                polygonsParadas.push(polygon);
+                CreaMarcadorPoligonoParada(coords, Geocerca);
+            }
+
+            function CreaMarcadorPoligonoParada(coords, GeoCerca) {
+                var bounds = new google.maps.LatLngBounds();
+                for (i = 0; i < coords.length; i++) {
+                    bounds.extend(coords[i]);
+                }
+
+                var marker = new google.maps.Marker({
+                    position: bounds.getCenter(),
+                    title: GeoCerca,
+                    map: map
+                });
+
+                var infowindow = new google.maps.InfoWindow({
+                    content: '<h4><b>' + GeoCerca + '</b></h4>'
+                });
+
+                marker.addListener('click', function () {
+                    closeLastOpenedInfoWindow();
+                    infowindow.open(map, marker);
+                    lastOpenedInfoWindow = infowindow;
+                });
+
+                markersParadas.push(marker);
+            }
+            function DeletemarkersParadas() {
+                for (var i = 0; i < markersParadas.length; i++) {
+                    markersParadas[i].setMap(null);
+                }
+                markersParadas = [];
+                for (var j = 0; j < polygonsParadas.length; j++) {
+                    if (typeof polygonsParadas[j] != 'undefined') {
+                        polygonsParadas[j].setMap(null);
+                    }
+                }
+                polygonsParadas = [];
+
+            }
+            //END REGION
+
+            //REGION GEOCERCAS EN RASTREO CONTINUO
+            var polygonsGeoRastreo = [];
+            var markersGeoRastreo = [];
+
+            function creaPoligonoGeoRastreo(coords, color, Geocerca) {
+                var polygon = new google.maps.Polygon({
+                    paths: coords,
+                    strokeColor: color,
+                    strokeOpacity: 0.8,
+                    strokeWeight: 2,
+                    fillColor: color,
+                    fillOpacity: 0.35
+                });
+                polygon.setMap(map);
+                polygonsGeoRastreo.push(polygon);
+                CreaMarcadorPoligonoGeoRastreo(coords, Geocerca);
+            }
+
+            function CreaMarcadorPoligonoGeoRastreo(coords, GeoCerca) {
+                var bounds = new google.maps.LatLngBounds();
+                for (i = 0; i < coords.length; i++) {
+                    bounds.extend(coords[i]);
+                }
+
+                var marker = new google.maps.Marker({
+                    position: bounds.getCenter(),
+                    title: GeoCerca,
+                    map: map
+                });
+
+                var infowindow = new google.maps.InfoWindow({
+                    content: '<h4><b>' + GeoCerca + '</b></h4>'
+                });
+
+                marker.addListener('click', function () {
+                    closeLastOpenedInfoWindow();
+                    infowindow.open(map, marker);
+                    lastOpenedInfoWindow = infowindow;
+                });
+
+                markersGeoRastreo.push(marker);
+            }
+            function DeletemarkersGeoRastreo() {
+                for (var i = 0; i < markersGeoRastreo.length; i++) {
+                    markersGeoRastreo[i].setMap(null);
+                }
+                markersGeoRastreo = [];
+                for (var j = 0; j < polygonsGeoRastreo.length; j++) {
+                    if (typeof polygonsGeoRastreo[j] != 'undefined') {
+                        polygonsGeoRastreo[j].setMap(null);
+                    }
+                }
+                polygonsGeoRastreo = [];
+
+            }
+            //END REGION
+            function myfunction() {
+                var arrayOfStrings = HdnTextFilter.value.split("");
+                for (var i = 0; i < arrayOfStrings.length; i++) {
+                    var e = jQuery.Event("keypress");
+                    e.which = arrayOfStrings[i].charCodeAt(0);; // m code value
+                    e.altKey = true; // Alt key pressed
+                    $("#C_GvBarra_filter > div > input").trigger(e);
+                }
+            }
+
+            function CargaHistorico() {
+                debugger;
+                var datos = JSON.parse(HdnJSScript.value);
+
+                eval(datos.MarcadoresScript);
+                eval(datos.PolylineScript);
+            }
+
+            function GvBarraPaginator() {
+                $('.table.PaginarGV').each(function () {
+                    var Tthis = $(this);
+                    if (!$.fn.DataTable.isDataTable(Tthis) && Tthis.find("th").length > 0) {
+                        Tthis.prepend(("<thead></thead>"));
+                        Tthis.find('thead').append($("#C_GvBarra").find("tr:first"));
+                        var table = Tthis.DataTable({
+                            //data: datasource,
+                            //columns: [
+                            //   { title: "Vehiculo" },
+                            //   { title: "Fecha" },
+                            //   { title: "TiempoDetenido" },
+                            //   { title: "Extn." },
+                            //   { title: "Start date" },
+                            //   { title: "Salary" }
+                            //],
+                            deferRender: true,
+                            deferLoading: 100,
+                            scrollY: 130,
+                            scrollCollapse: true,
+                            scroller: {
+                                displayBuffer: 20
+                            },
+                            ordering: true
+                        });
+                        var tkeys = new $.fn.dataTable.KeyTable(table, {
+                            // options
+                        });
+                        var parent = Tthis.parent().parent().parent();
+                        $('.dataTables_scrollHeadInner > .table.ADScrollPaginator2').find('th').addClass('importantth');
+                        parent.find(".dataTables_paginate").css("display", "none");
+                        parent.find(".dataTables_length").css("display", "none");
+                    }
+                });
+            }
 
     </script>
     <script
diff --git a/GPS/Rastreo.aspx.vb b/GPS/Rastreo.aspx.vb
index e0566065a..2ba571c95 100644
--- a/GPS/Rastreo.aspx.vb
+++ b/GPS/Rastreo.aspx.vb
@@ -127,6 +127,7 @@ Partial Class GPS_Rastreo
             CargaDispositivos()
             CargaEventos()
             CargaGrupos()
+            CargaGruposPI()
             CreaTmpDTDetalle()
             IndiceGV = 0
         End If
@@ -144,6 +145,16 @@ Partial Class GPS_Rastreo
         RegistraScript("$('#C_GvDispositivos_chkSelectAll').click(function () { $("".ChkAllEvt input"").not(this).prop('checked',$(this).is(':checked')); });", "1")
 
     End Sub
+    Private Sub CargaGruposPI()
+        Dim ObjGPS As New ClsGPS
+        If ObjGPS.PuntoDeInteresGrupoGet(-1, 1) Then
+            GvGrupos.DataSource = ObjGPS.DtResultados
+        End If
+        ObjGPS.Dispose()
+        GvGrupos.DataBind()
+
+        UpAgregarPuntoInteres.Update()
+    End Sub
 
     Private Sub CargaEventos()
         Dim GPS As New ClsGPS
@@ -2177,4 +2188,37 @@ Partial Class GPS_Rastreo
     End Sub
 #End Region
 
+    Protected Sub GvGrupos_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GvGrupos.RowDataBound
+        If e.Row.RowType = DataControlRowType.DataRow Then
+            e.Row.Attributes.Add("onClick", $"CargaDatosSeleccionados({e.Row.RowIndex}, '{e.Row.DBCampo("CvePuntoDeInteresGrupo").ToString}');")
+        End If
+    End Sub
+
+    Protected Sub BtnAgregarPunto_Click(sender As Object, e As EventArgs) Handles BtnAgregarPunto.Click
+        Dim HuboError = False
+        Dim ObjGPS As New ClsGPS
+        ObjGPS.IniciaTransacSQL()
+        Try
+            Dim GEOM As String = $"POINT{GeoCerca.Value}"
+            If Not ObjGPS.PuntoDeInteresAdd(TxtNombrePI.Text, UsuarioActual.CveCliente, GEOM, True, TxtDescripcion.Text, HdnGrupo.Value.ToEntero) Then
+                HuboError = True
+            End If
+        Catch ex As Exception
+            HuboError = True
+            OnError("Ocurrió un error al agregar el punto de interés", ex)
+        End Try
+
+        If HuboError Then
+            ObjGPS.RollBack()
+        Else
+            ObjGPS.Commit()
+            TxtDescripcion.Text = ""
+            TxtNombre.Text = ""
+            Alert("El punto de interés se agregó correctamente", TipoMensaje.MsgInformacion)
+
+            RegistraScript("$('#DivAgregarPuntoInteres').modal('hide');DeleteMarkersG();", "1")
+        End If
+
+        UpAgregarPuntoInteres.Update()
+    End Sub
 End Class