From 45027a61e701306029ee72bbaf339c7f9db72d10 Mon Sep 17 00:00:00 2001
From: Jonathan Alexis Perez Morales <jonathan.perez@adssistemas.mx>
Date: Thu, 6 Feb 2020 13:19:52 -0700
Subject: [PATCH] Mostar puntos de interes en rastreo

---
 GPS/Rastreo.aspx                  | 281 ++++++++++++++----------------
 GPS/Rastreo.aspx.vb               | 255 ++++++++++++++++++---------
 GPS/Rastreo/JS/GeoRutas.js        |   6 +-
 GPS/Rastreo/JS/Geocercas.js       | 138 +++++++++++++++
 GPS/Rastreo/JS/PuntosDeInteres.js | 108 ++++++++++++
 5 files changed, 554 insertions(+), 234 deletions(-)
 create mode 100644 GPS/Rastreo/JS/Geocercas.js
 create mode 100644 GPS/Rastreo/JS/PuntosDeInteres.js

diff --git a/GPS/Rastreo.aspx b/GPS/Rastreo.aspx
index fdce52776..6da745add 100644
--- a/GPS/Rastreo.aspx
+++ b/GPS/Rastreo.aspx
@@ -405,7 +405,7 @@
                                                 <div class="form-group form-md-line-input input-iconright">
                                                     <label>Trazar Geocercas: </label>
                                                     <br />
-                                                    <asp:CheckBox ID="ChkTrazarGeocercas" Text=" " runat="server" CssClass="chksino" Width="250px"></asp:CheckBox>
+                                                    <asp:CheckBox ID="ChkTrazarGeocercas" AutoPostBack="true" OnCheckedChanged="ChkTrazarGeocercas_CheckedChanged" Text=" " runat="server" CssClass="chksino" Width="250px"></asp:CheckBox>
                                                 </div>
                                             </div>
                                             <div class="col-md-3" runat="server" visible="False" id="dvTrazoRutas">
@@ -415,7 +415,14 @@
                                                     <asp:CheckBox ID="ChkTrazarGeorutas" AutoPostBack="true" Text=" " runat="server" CssClass="chksino" Width="250px" OnCheckedChanged="ChkTrazarGeorutas_CheckedChanged"></asp:CheckBox>
                                                 </div>
                                             </div>
-                                            <div class="col-md-6">
+                                            <div class="col-md-3" runat="server" visible="False" id="dvTrazoPI">
+                                                <div class="form-group form-md-line-input input-iconright">
+                                                    <label>Trazar P. de Interés: </label>
+                                                    <br />
+                                                    <asp:CheckBox ID="ChkTrazarPuntosInteres" AutoPostBack="true" Text=" " runat="server" CssClass="chksino" Width="250px" OnCheckedChanged="ChkTrazarPI_CheckedChanged"></asp:CheckBox>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-3">
                                             </div>
                                         </div>
                                     </ContentTemplate>
@@ -820,6 +827,49 @@
             </asp:UpdatePanel>
         </div>
     </div>
+    <div id="DivGeoCercas" class="modal ADS fade" role="dialog">
+        <div class="modal-dialog">
+            <asp:UpdatePanel ID="UpGeoCercas" 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" id="H3" runat="server">Trazar GeoCercas</h4>
+                    </div>
+                    <div class="modal-body">
+                        <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="TxtBusquedaGeo" class="form-control input-sm" onkeyup="<%= String.Format("FiltrarTabla('TxtBusquedaGeo','{0}')", GvGeoCercas.ClientID) %>" style="display: inline-block; margin-right: -20px; width: 150px;" />
+                                <a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvGeorutas.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
+                            </div>
+                        </div>
+                        <asp:GridView ID="GvGeoCercas" runat="server" GridLines="None" data-height="200" DataKeyNames="Coordenadas,GeoReferencia,Color" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-sort="true" BorderWidth="1" BorderColor="#D3D3D3" CellSpacing="0" Width="100%" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros">
+                            <Columns>
+                                <asp:TemplateField ItemStyle-HorizontalAlign="center" ItemStyle-Width="10%" ItemStyle-CssClass="NoClick">
+                                    <HeaderTemplate>
+                                        <asp:CheckBox runat="server" ID="chkSelectAll" CssClass="ChkAllClickGeo" />
+                                    </HeaderTemplate>
+                                    <ItemTemplate>
+                                        <asp:CheckBox runat="server" ID="ChkGeo" CssClass="ChkAllEvtGeo" />
+                                    </ItemTemplate>
+                                </asp:TemplateField>
+                                <asp:BoundField DataField="GeoReferencia" ItemStyle-Width="20%" HeaderText="Geocerca" ItemStyle-HorizontalAlign="Left" />
+                                <asp:TemplateField HeaderText="Color" ItemStyle-Width="20%" ItemStyle-HorizontalAlign="Center">
+                                    <ItemTemplate>
+                                        <asp:LinkButton ID="imgColor" HeaderText="Color" runat="server" Style="height: 20px;" Enabled="false" CausesValidation="False" CssClass="btn btn-circle btn-sm green" />
+                                    </ItemTemplate>
+                                </asp:TemplateField>
+                            </Columns>
+                        </asp:GridView>
+                    </div>
+                    <div class="modal-footer">
+                        <button data-dismiss="modal" class="btn btn-default">Cerrar</button>
+                    </div>
+                </ContentTemplate>
+            </asp:UpdatePanel>
+        </div>
+    </div>
     <div id="DivGeoRutas" class="modal ADS fade" role="dialog">
         <div class="modal-dialog">
             <asp:UpdatePanel ID="UpGeorutas" class="modal-content rowpadding" tabindex="-1" runat="server" UpdateMode="Conditional">
@@ -837,14 +887,16 @@
                                 <a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvGeorutas.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
                             </div>
                         </div>
-                        <asp:GridView ID="GvGeorutas" runat="server" GridLines="None" data-height="200" DataKeyNames="Coordenadas,CveGeoReferencia,GeoReferencia, CveDispositivo,Tipo,Color,Estatus,FechaInicio,FechaFin,AplicaLunes,AplicaMartes,AplicaMiercoles,AplicaJueves,AplicaViernes,AplicaSabado,AplicaDomingo, HoraInicio, HoraFin, Tolerancia" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-sort="true" BorderWidth="1" BorderColor="#D3D3D3" CellSpacing="0" Width="100%" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros">
+                        <asp:GridView ID="GvGeorutas" runat="server" GridLines="None" data-height="200" DataKeyNames="Coordenadas,GeoReferencia,Color" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-sort="true" BorderWidth="1" BorderColor="#D3D3D3" CellSpacing="0" Width="100%" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros">
                             <Columns>
-                                <asp:TemplateField ItemStyle-HorizontalAlign="center" ItemStyle-Width="10%">
+                                <asp:TemplateField ItemStyle-HorizontalAlign="center" ItemStyle-Width="10%" ItemStyle-CssClass="NoClick">
+                                    <HeaderTemplate>
+                                        <asp:CheckBox runat="server" ID="chkSelectAll" CssClass="ChkAllClickRuta" />
+                                    </HeaderTemplate>
                                     <ItemTemplate>
-                                        <asp:CheckBox runat="server" ID="ChkRutas" />
+                                        <asp:CheckBox runat="server" ID="ChkRutas" CssClass="ChkAllEvtRuta" />
                                     </ItemTemplate>
                                 </asp:TemplateField>
-                                <asp:BoundField DataField="Tipo" ItemStyle-Width="20%" HeaderText="Tipo" ItemStyle-HorizontalAlign="Left" />
                                 <asp:BoundField DataField="GeoReferencia" ItemStyle-Width="20%" HeaderText="GeoReferencia" ItemStyle-HorizontalAlign="Left" />
                                 <asp:TemplateField HeaderText="Color" ItemStyle-Width="20%" ItemStyle-HorizontalAlign="Center">
                                     <ItemTemplate>
@@ -861,6 +913,45 @@
             </asp:UpdatePanel>
         </div>
     </div>
+    <div id="DivMostrarPI" class="modal ADS fade" role="dialog">
+        <div class="modal-dialog">
+            <asp:UpdatePanel ID="UpMostarPI" 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" id="H2" runat="server">Trazar Puntos de Interés</h4>
+                    </div>
+                    <div class="modal-body">
+                        <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="TxtBusquedaPI" class="form-control input-sm" onkeyup="<%= String.Format("FiltrarTabla('TxtBusquedaPI','{0}')", GvGeorutas.ClientID) %>" style="display: inline-block; margin-right: -20px; width: 150px;" />
+                                <a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvGeorutas.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
+                            </div>
+                        </div>
+                        <asp:GridView ID="GVPuntosInteres" runat="server" GridLines="None" DataKeyNames="Punto,PuntoDeInteres" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-height="150" data-sort="true" BorderWidth="1" BorderColor="#D3D3D3" CellSpacing="0" Width="100%" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros">
+                            <Columns>
+                                <asp:TemplateField ItemStyle-HorizontalAlign="center" ItemStyle-Width="10%" ItemStyle-CssClass="NoClick">
+                                    <HeaderTemplate>
+                                        <asp:CheckBox runat="server" ID="chkSelectAll" CssClass="ChkAllClickPI" />
+                                    </HeaderTemplate>
+                                    <ItemTemplate>
+                                        <asp:CheckBox runat="server" ID="ChkPI" CssClass="ChkAllEvtPI" />
+                                    </ItemTemplate>
+                                </asp:TemplateField>
+                                <asp:BoundField DataField="PuntoDeInteres" ItemStyle-Width="30%" HeaderText="PuntoDeInteres" ItemStyle-HorizontalAlign="Left" />
+                                <asp:BoundField DataField="Descripcion" ItemStyle-Width="30%" HeaderText="Descripcion" ItemStyle-HorizontalAlign="Left" />
+                            </Columns>
+                        </asp:GridView>
+                    </div>
+                    <div class="modal-footer">
+                        <button data-dismiss="modal" class="btn btn-default">Cerrar</button>
+                    </div>
+                </ContentTemplate>
+            </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">
@@ -949,6 +1040,11 @@
         var retorno;
         $('body').on('click', '.ChkAllClick input', function () { $(".ChkAllEvt input").not(this).prop('checked', $('.ChkAllClick input').is(':checked')); });
         $('body').on('click', '.ChkAllClick2 input', function () { $(".ChkAllEvt input").not(this).prop('checked', $('.ChkAllClick2 input').is(':checked')); });
+
+        $('body').on('click', '.ChkAllClickGeo input', function () { $(".ChkAllEvtGeo input").not(this).prop('checked', $('.ChkAllClickGeo input').is(':checked')); });
+        $('body').on('click', '.ChkAllClickRuta input', function () { $(".ChkAllEvtRuta input").not(this).prop('checked', $('.ChkAllClickRuta input').is(':checked')); });
+        $('body').on('click', '.ChkAllClickPI input', function () { $(".ChkAllEvtPI input").not(this).prop('checked', $('.ChkAllClickPI input').is(':checked')); });
+
         function initMap() {
             map = new google.maps.Map(document.getElementById('map'), {
                 center: { lat: 24.6345, lng: -102.5528 },
@@ -958,23 +1054,20 @@
             var ShowDiv1 = document.createElement('div');
             var ShowDivControl = new ShowDiv(ShowDiv1, map);
 
-
             ShowDiv1.index = 1;
             ShowDiv1.id = "showdiv1"
 
             map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(ShowDiv1);
 
-
             var upControlDiv = document.createElement('div');
             var upControl = new ControlLabels(upControlDiv, map);
 
             upControlDiv.index = 1;
             map.controls[google.maps.ControlPosition.TOP_LEFT].push(upControlDiv);
 
-            var upGeoDiv = document.createElement('div');
-            var upGeo = new ControlGeocercas(upGeoDiv, map);
-
-            map.controls[google.maps.ControlPosition.TOP_LEFT].push(upGeoDiv);
+            initGeocercas();
+            initGeoRutas();
+            initPI();
 
             geocoder = new google.maps.Geocoder();
 
@@ -2178,6 +2271,7 @@
                     SelectControlDiv.index = 1;
                     map.controls[google.maps.ControlPosition.TOP_LEFT].push(SelectControlDiv);
                     map.addListener('click', addLatLng);
+                    CambiaTipo("Geocerca");
                 }
 
                 if ($("#DvGuardar").length <= 0) {
@@ -2269,7 +2363,7 @@
                 controlUI.style.cursor = 'pointer';
                 // controlUI.style.position = 'absolute';
                 controlUI.style.left = "0px";
-                controlUI.style.width = "300px";
+                controlUI.style.width = "400px";
                 controlUI.style.marginTop = "10px"
                 controlUI.style.top = "0px";
                 controlUI.className = 'gmnoprint';
@@ -2297,7 +2391,7 @@
                 ControlSub2.style.minWidth = '28px'
                 ControlSub2.style.fontWeight = '500'
                 ControlSub2.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
-                ControlSub2.innerHTML = 'Geocerca'
+                ControlSub2.innerHTML = 'Dibujar Geocerca'
                 ControlSub1.appendChild(ControlSub2)
 
                 var ControlSub3 = document.createElement('div')
@@ -2322,7 +2416,7 @@
                 ControlSub4.style.fontWeight = '500'
                 ControlSub4.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
                 ControlSub4.style.borderLeft = '0px;'
-                ControlSub4.innerHTML = 'Georuta'
+                ControlSub4.innerHTML = 'Dibujar Georuta'
                 ControlSub3.appendChild(ControlSub4)
 
                 var ControlSub5 = document.createElement('div')
@@ -2347,7 +2441,7 @@
                 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'
+                ControlSub6.innerHTML = 'Dibujar Punto de Interés'
                 ControlSub5.appendChild(ControlSub6)
 
                 // Setup the click event listeners: simply set the map to Chicago.
@@ -2580,26 +2674,33 @@
                 $('#C_GvGrupos tr').filter(':nth-child(' + columnaSeleccionada + ')').css('background-color', '#F5B27A');
                 indiceAnteriorPI = 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")
+                    SelectBoton("Geocerca");
+                    DeselectBoton("Georuta");
+                    DeselectBoton("PuntoInteres");
                 } else if (Tipo === 'Georuta') {
                     $("#HdnTipo").val('Georuta')
-                    $("#Geocerca").css("font-weight", "normal")
-                    $("#Georuta").css("font-weight", "bold")
-                    $("#PuntoInteres").css("font-weight", "normal")
+                    SelectBoton("Georuta");
+                    DeselectBoton("Geocerca");
+                    DeselectBoton("PuntoInteres");
                 } else if (Tipo === 'PuntoInteres') {
                     $("#HdnTipo").val('PuntoInteres')
-                    $("#Geocerca").css("font-weight", "normal")
-                    $("#Georuta").css("font-weight", "normal")
-                    $("#PuntoInteres").css("font-weight", "bold")
+                    SelectBoton("PuntoInteres");
+                    DeselectBoton("Geocerca");
+                    DeselectBoton("Georuta");
                 }
             }
+            function SelectBoton(boton) {
+                $("#" + boton).css("background-color", "#3598DC");
+                $("#" + boton).css("color", "white");
+            }
+            function DeselectBoton(boton) {
+                $("#" + boton).css("background-color", "rgb(255, 255, 255)");
+                $("#" + boton).css("color", "black");
+            }
 
             function addLatLng(event) {
                 //SOLO SE PUEDE AGREGAR UN PUNTO DE INTERES A LA VEZ
@@ -2829,53 +2930,6 @@
                 });
 
             }
-            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() {
@@ -2907,85 +2961,6 @@
 
             //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 = [];
@@ -3160,5 +3135,7 @@
     <script src="../Metronic/assets/global/plugins/jquery-minicolors/jquery.minicolors.min.js"></script>
     <script src="../Metronic/assets/global/plugins/jquery-minicolors/components-color-pickers.min.js"></script>
     <script src="Rastreo/JS/GeoRutas.js"></script>
+    <script src="Rastreo/JS/PuntosDeInteres.js"></script>
+    <script src="Rastreo/JS/Geocercas.js"></script>
 </asp:Content>
 
diff --git a/GPS/Rastreo.aspx.vb b/GPS/Rastreo.aspx.vb
index 46134184b..9ab3b68b7 100644
--- a/GPS/Rastreo.aspx.vb
+++ b/GPS/Rastreo.aspx.vb
@@ -336,41 +336,33 @@ Partial Class GPS_Rastreo
                         Mensajes = Mensajes + $"{GVRow.DataKey("NoEconomico").ToString},"
 
                     End If
-                End If
-            ElseIf Opcion = "All" Then
-
-                'Dim CveDispositivo = GVRow.DataKey("CveDispositivo").ToEntero
-                'Dim RowDispositivo As DataRow = GlobalDTDispositivos(UsuarioActual.CveCliente).FiltroPrimero($"CveDispositivo = {CveDispositivo}")
-                'Dim json As JObject = GPS.GetPosicionEquipoJson(CveDispositivo, FechaI, FechaF, RowDispositivo("Icono").ToString, RowDispositivo("ColorTrazo").ToString, GVRow.DataKey("NombreVehiculo").ToString, UsuarioActual.TienePermisoProceso(200))
-                'HdnJSScript.Value = json.ToString()
-                'DtPosiciones = GPS.DtPosicionesResultados '.AsEnumerable().Take(1000).CopyToDataTable()
-                'UpDatosMapa.Update()
-
-                'RegistraScript($"CargaHistorico(); PreparaDibujadoHistorico();PreparaDibujado(3);")
-
-
-                If ChkTrazarGeocercas.Checked Then
-                    Dim DtGeocercas As DataTable = Nothing
-
-                    If GPS.GetReferenciaDetalle(-1, -1, GVRow.DataKey("CveDispositivo").ToEntero, UsuarioActual.CveCliente) Then
-                        DtGeocercas = GPS.DtResultados.FiltraParametros("EsParada = False And Tipo='Geocerca' AND Estatus = 1")
-                    End If
-
-                    'SI TIENE GEOREFERENCIAS LAS MOSTRAMOS
-                    If DtGeocercas IsNot Nothing Then
-                        Dim SbJS As New StringBuilder
-                        SbJS.Append("$('#LnkMostarGeocercas').css('display', 'block'); setTimeout(function(){  ")
-                        For Each Dr As DataRow In DtGeocercas.Rows
-                            Dim CoordsParada = SQLToGmapsJArray(Dr("Coordenadas").ToString, "POLYGON")
-                            SbJS.AppendFormat(" creaPoligonoGeocerca({0},'{1}','{2}'); ", CoordsParada.ToString, Dr("Color").ToString, Dr("GeoReferencia").ToString)
-                        Next
-                        SbJS.Append(" VerGeocercas(); },1000);")
-                        RegistraScript(SbJS.ToString)
-                    End If
-                Else
-                    RegistraScript("$('#LnkMostarGeocercas').css('display', 'none');")
+                End If
+
+                If ChkTrazarGeocercas.Checked Then
+                    MostrarGeoCercas()
+                End If
+
+                If ChkTrazarGeorutas.Checked Then
+                    MostrarGeoRutas()
+                End If
+
+                If ChkTrazarPuntosInteres.Checked Then
+                    MostrarPuntosDeInteres()
                 End If
 
+            ElseIf Opcion = "All" Then
+
+                If ChkTrazarGeocercas.Checked Then
+                    MostrarGeoCercas()
+                End If
+
+                If ChkTrazarGeorutas.Checked Then
+                    MostrarGeoRutas()
+                End If
+
+                If ChkTrazarPuntosInteres.Checked Then
+                    MostrarPuntosDeInteres()
+                End If
 
                 If GPS.GetPosicionEquipo(GVRow.DataKey("CveDispositivo").ToEntero, FechaI, FechaF) Then
                     If GPS.DtResultados.Rows.Count > 0 Then
@@ -583,7 +575,20 @@ Partial Class GPS_Rastreo
                             End If
                             RegistraScript($"CreaMarcador({Coord},'{row("NombreVehiculo")}', '{Info}', '{Icono}');", row("CveDispositivo").ToString)
                             AddRowPosiciones(Vehiculo, Coord, row("SPD").ToString.ToDouble, Fecha, row("CveDispositivo").ToString.ToEntero, row("TiempoDetenido").ToString.ToDouble)
-                        Next
+                        Next
+
+                        If ChkTrazarGeocercas.Checked Then
+                            MostrarGeoCercas()
+                        End If
+
+                        If ChkTrazarGeorutas.Checked Then
+                            MostrarGeoRutas()
+                        End If
+
+                        If ChkTrazarPuntosInteres.Checked Then
+                            MostrarPuntosDeInteres()
+                        End If
+
                     Else
                         Alert($"No se encontraron resultados")
                     End If
@@ -630,15 +635,16 @@ Partial Class GPS_Rastreo
                         Next
 
                         If ChkTrazarGeocercas.Checked Then
-                            Dim Dispositivos As String = Equipos.Replace(";", ",").Remove(Equipos.Length - 1, 1)
-                            CargaGeocercas(Dispositivos)
+                            MostrarGeoCercas()
                         End If
 
                         If ChkTrazarGeorutas.Checked Then
-                            MostarGeoRutas()
+                            MostrarGeoRutas()
+                        End If
+
+                        If ChkTrazarPuntosInteres.Checked Then
+                            MostrarPuntosDeInteres()
                         End If
-
-                        RegistraScript("setTimeout(function(){  $('#LnkMostarGeocercas').css('display', 'block'); },1000);")
                     Else
                         Alert($"No se encontraron resultados", TipoMensaje.MsgAdvertencia)
                     End If
@@ -713,29 +719,47 @@ Partial Class GPS_Rastreo
         GPS.Dispose()
     End Sub
     Private Sub CargaGeocercas(Dispositivos As String)
-        Dim DtGeocercas As DataTable = Nothing
-
-        Dim ObjGPSGeo As New ClsGPS
-        If ObjGPSGeo.GetReferenciaDetalle(-1, -1, -1, UsuarioActual.CveCliente) Then
-            DtGeocercas = ObjGPSGeo.DtResultados.FiltraParametros("EsParada = False AND Tipo='Geocerca' AND Estatus = 1")
-        End If
-        ObjGPSGeo.Dispose()
-
-        'SI TIENE GEOREFERENCIAS LAS MOSTRAMOS
-        If DtGeocercas IsNot Nothing Then
-            Dim DtParadasDispositivo = DtGeocercas.FiltraParametros($"CveDispositivo IN({Dispositivos})", "", {"Color", "GeoReferencia", "Coordenadas"})
-            Dim SbJS As New StringBuilder
-            SbJS.Append("$('#LnkMostarGeocercas').css('display', 'block'); setTimeout(function(){  ")
-            For Each Dr As DataRow In DtParadasDispositivo.Rows
-                SbJS.AppendFormat(" creaPoligonoGeocerca({0},'{1}','{2}'); ", SQLToGmapsJArray(Dr("Coordenadas").ToString, "POLYGON"), Dr("Color").ToString, Dr("GeoReferencia").ToString)
-            Next
-            SbJS.Append(" VerGeocercas(); },1000);")
-            RegistraScript(SbJS.ToString)
-        End If
+        Try
+            Dim DtGeocercas As DataTable = Nothing
+
+            Dim ObjGPSGeo As New ClsGPS
+            If ObjGPSGeo.GetReferenciaDetalle(-1, -1, -1, UsuarioActual.CveCliente) Then
+                DtGeocercas = ObjGPSGeo.DtResultados.FiltraParametros("EsParada = False AND Tipo='Geocerca' AND Estatus = 1")
+            End If
+            ObjGPSGeo.Dispose()
+
+            'SI TIENE GEOREFERENCIAS LAS MOSTRAMOS
+            If DtGeocercas IsNot Nothing Then
+                Dim DtParadasDispositivo = DtGeocercas.FiltraParametros($"CveDispositivo IN({Dispositivos})", DistinctColumns:={"GeoReferencia", "Coordenadas", "Color"})
+
+                GvGeoCercas.DataSource = DtParadasDispositivo
+                GvGeoCercas.DataBind()
+            End If
+        Catch ex As Exception
+            OnError("Ocurrió un error al consultar las geocercas", ex)
+        End Try
+        UpGeoCercas.Update()
     End Sub
-    Private Sub MostarGeoRutas()
+    Private Sub MostrarGeoCercas()
         Dim count = 0
-        RegistraScript($"initGeoRutas();", count.ToString())
+        Try
+            RegistraScript($"NuevaConsultaGeoCercas();", count.ToString())
+            For Each GvRow As GridViewRow In GvGeoCercas.Rows
+                If GvRow.RowType = DataControlRowType.DataRow Then
+                    If GvRow.FCCheckBox("ChkGeo").Checked Then
+                        count += 1
+                        RegistraScript(String.Format("creaPoligonoGeocerca({0},'{1}','{2}'); ", SQLToGmapsJArray(GvRow.DataKey("Coordenadas"), "POLYGON"), GvRow.DataKey("Color"), GvRow.DataKey("GeoReferencia")), count.ToString())
+                    End If
+                End If
+            Next
+            RegistraScript("VerGeocercas();", (count + 1).ToString())
+        Catch ex As Exception
+            OnError("Ocurrió un error al consultar las geocercas", ex)
+        End Try
+    End Sub
+    Private Sub MostrarGeoRutas()
+        Dim count = 0
+        RegistraScript($"NuevaConsultaGeoRutas();", count.ToString())
 
         For Each GvRow As GridViewRow In GvGeorutas.Rows
             If GvRow.RowType = DataControlRowType.DataRow Then
@@ -747,6 +771,20 @@ Partial Class GPS_Rastreo
             End If
         Next
 
+    End Sub
+
+    Private Sub MostrarPuntosDeInteres()
+        RegistraScript($"NuevaConsultaPI();", "0")
+
+        For Each GvRow As GridViewRow In GVPuntosInteres.Rows
+            If GvRow.RowType = DataControlRowType.DataRow Then
+                If GvRow.FCCheckBox("ChkPI").Checked Then
+                    Dim coords = SQLToGmaps(GvRow.DataKey("Punto"), "POINT")
+                    RegistraScript($"CreaMarcadorPI({coords}, '{GvRow.DataKey("PuntoDeInteres").ToString}')", GvRow.RowIndex.ToString())
+                End If
+            End If
+        Next
+
     End Sub
     Protected Sub TimmerRefresh_Tick(sender As Object, e As EventArgs)
 
@@ -1155,10 +1193,18 @@ Partial Class GPS_Rastreo
 
     Protected Sub CargaOpcion(opcion As String)
         TimmerRefresh.Enabled = False
-        HdnOpcion.Value = opcion
+        HdnOpcion.Value = opcion
+
+        dvTrazo.Visible = False
+        dvTrazoGeo.Visible = False
+        dvTrazoRutas.Visible = False
+        dvTrazoPI.Visible = False
+
+        chkTrazarLinea.Checked = False
+        ChkTrazarGeocercas.Checked = False
+        ChkTrazarGeorutas.Checked = False
+        ChkTrazarPuntosInteres.Checked = False
 
-        chkTrazarLinea.Visible = False
-        ChkTrazarGeocercas.Visible = False
         DvPaginacion.Visible = False
         rowImpresionesKM.Visible = False
         If opcion = "All" Then
@@ -1169,6 +1215,7 @@ Partial Class GPS_Rastreo
             dvTrazo.Visible = False
             dvTrazoGeo.Visible = True
             dvTrazoRutas.Visible = True
+            dvTrazoPI.Visible = True
             ChkTrazarGeocercas.Visible = True
             dvMinutos.Visible = False
             RegistraScript("$('#dvConsulta').modal();TerminaDibujado();")
@@ -1183,6 +1230,7 @@ Partial Class GPS_Rastreo
             dvTrazo.Visible = False
             dvTrazoGeo.Visible = False
             dvTrazoRutas.Visible = False
+            dvTrazoPI.Visible = False
             dvMinutos.Visible = False
             BtnRastrear.ValidationGroup = "GrpFechas"
             RegistraScript("$('#dvConsulta').modal();TerminaDibujado();")
@@ -1195,6 +1243,7 @@ Partial Class GPS_Rastreo
             dvTrazo.Visible = False
             dvTrazoGeo.Visible = False
             dvTrazoRutas.Visible = False
+            dvTrazoPI.Visible = False
             dvDispositivos.Visible = True
             dvMinutos.Visible = False
             GvDispositivos.DataSource = GlobalDTDispositivosUsuarios(UsuarioActual.CveCliente, UsuarioActual.CveUsuario).FiltraParametros("Estatus = 1 AND LimiteVelocidad = 1")
@@ -1212,6 +1261,7 @@ Partial Class GPS_Rastreo
             dvTrazo.Visible = False
             dvTrazoGeo.Visible = False
             dvTrazoRutas.Visible = False
+            dvTrazoPI.Visible = False
             dvMinutos.Visible = True
             dvEventos.Visible = False
             BtnRastrear.ValidationGroup = "GrpFechas"
@@ -1225,6 +1275,7 @@ Partial Class GPS_Rastreo
             dvTrazo.Visible = False
             dvTrazoGeo.Visible = False
             dvTrazoRutas.Visible = False
+            dvTrazoPI.Visible = False
             dvMinutos.Visible = False
             dvEventos.Visible = False
             BtnRastrear.ValidationGroup = "GrpFechas"
@@ -1234,8 +1285,9 @@ Partial Class GPS_Rastreo
             dvFechas.Visible = False
             dvDispositivos.Visible = True
             dvTrazo.Visible = False
-            dvTrazoGeo.Visible = False
-            dvTrazoRutas.Visible = False
+            dvTrazoGeo.Visible = True
+            dvTrazoRutas.Visible = True
+            dvTrazoPI.Visible = True
             dvMinutos.Visible = False
             dvEventos.Visible = False
             BtnRastrear.ValidationGroup = "xx"
@@ -1247,23 +1299,13 @@ Partial Class GPS_Rastreo
             dvTrazo.Visible = True
             dvTrazoGeo.Visible = True
             dvTrazoRutas.Visible = True
+            dvTrazoPI.Visible = True
             dvEventos.Visible = False
             BtnRastrear.ValidationGroup = "xx"
             RegistraScript("$('#dvConsulta').modal();TerminaDibujado();")
             myModalLabel2.InnerHtml = "Rastreo Continuo"
             chkTrazarLinea.Visible = True
             ChkTrazarGeocercas.Visible = True
-        ElseIf opcion = "Watch" Then
-            dvFechas.Visible = False
-            dvDispositivos.Visible = True
-            dvMinutos.Visible = False
-            dvTrazo.Visible = True
-            dvTrazoGeo.Visible = True
-            dvTrazoRutas.Visible = True
-            dvEventos.Visible = False
-            BtnRastrear.ValidationGroup = "xx"
-            RegistraScript("$('#dvConsulta').modal();TerminaDibujado();")
-            myModalLabel2.InnerHtml = "Rastreo Continuo"
         ElseIf opcion = "KM" Then
             dvFechas.Visible = True
             dvDispositivos.Visible = False
@@ -1271,6 +1313,7 @@ Partial Class GPS_Rastreo
             dvTrazo.Visible = False
             dvTrazoGeo.Visible = False
             dvTrazoRutas.Visible = False
+            dvTrazoPI.Visible = False
             dvEventos.Visible = False
             BtnRastrear.ValidationGroup = "xx"
             RegistraScript("$('#dvConsulta').modal();TerminaDibujado();")
@@ -1278,7 +1321,11 @@ Partial Class GPS_Rastreo
         ElseIf opcion = "TPS" Then
             dvFechas.Visible = False
             dvDispositivos.Visible = True
-            dvMinutos.Visible = False
+            dvMinutos.Visible = False
+            dvTrazo.Visible = False
+            dvTrazoGeo.Visible = False
+            dvTrazoRutas.Visible = False
+            dvTrazoPI.Visible = False
             DivFechasGVBarra.Visible = False
             GvDispositivos.DataSource = GlobalDTDispositivosUsuarios(UsuarioActual.CveCliente, UsuarioActual.CveUsuario).FiltraParametros("CveModelo = 17")
             GvDispositivos.DataBind()
@@ -1286,24 +1333,35 @@ Partial Class GPS_Rastreo
             dvEventos.Visible = False
             RegistraScript("$('#dvConsulta').modal();TerminaDibujado();")
             myModalLabel2.InnerHtml = "Contador de pasajeros"
+        End If
+
+        If Not dvTrazoGeo.Visible Then
+            RegistraScript("$('#LnkMostarGeocercas').css('display', 'none');")
         End If
+
         If dvTrazoRutas.Visible Then
             CargaGeoRutas()
         Else
             RegistraScript("$('#LnkMostarGeoRutas').css('display', 'none');")
         End If
+
+        If dvTrazoPI.Visible Then
+            CargaPI()
+        Else
+            RegistraScript("$('#LnkMostarPI').css('display', 'none');")
+        End If
+
         If opcion <> "Speed" AndAlso opcion <> "TPS" AndAlso Filtrado Then
             CargaDispositivos()
             Filtrado = False
         End If
+
         RegistraScript("$(""#h"").modal('hide');
                 $(""#ShowDiv3"").css(""line-height"", ""20px"");
                 open = false;
                 $(""#ShowDiv3"").html('<i class=""fa fa-angle-up"" aria-hidden=""True""></i>');", "HideDiv")
         RegistraScript("$(""input[name^='ctl00$C$GvDispositivos']"").not(this).prop('checked', false);$('#C_GvDispositivos_chkSelectAll').click(function () { $(""input[name^='ctl00$C$GvDispositivos']"").not(this).prop('checked', this.checked); });", "chkGV")
 
-
-
         UPConsulta.Update()
     End Sub
 
@@ -2169,12 +2227,39 @@ Partial Class GPS_Rastreo
         End Using
         Return retorno
     End Function
-#Region "G E O R U T A S"
+#Region "G E O R E F E R E N C I A S"
+    Protected Sub ChkTrazarGeocercas_CheckedChanged(sender As Object, e As EventArgs)
+        If ChkTrazarGeocercas.Checked Then
+            Dim CountEquipos As Integer = 0
+            Dim Equipos As New StringBuilder()
+            For Each row As GridViewRow In GvDispositivos.Rows
+                If row.FCCheckBox("chkDis").Checked Then
+                    CountEquipos += 1
+                    Equipos.Append($"{row.DataKey("CveDispositivo")};")
+                End If
+            Next
+
+            If CountEquipos > 0 Then
+                Dim Dispositivos As String = Equipos.Replace(";", ",").Remove(Equipos.Length - 1, 1).ToString()
+                CargaGeocercas(Dispositivos)
+
+                RegistraScript("$('#DivGeoCercas').modal('show');")
+            Else
+                Alert("No hay equipos seleccionados", TipoMensaje.MsgAdvertencia)
+            End If
+
+        End If
+    End Sub
     Protected Sub ChkTrazarGeorutas_CheckedChanged(sender As Object, e As EventArgs)
         If ChkTrazarGeorutas.Checked Then
             RegistraScript("$('#DivGeoRutas').modal('show');")
         End If
     End Sub
+    Protected Sub ChkTrazarPI_CheckedChanged(sender As Object, e As EventArgs)
+        If ChkTrazarPuntosInteres.Checked Then
+            RegistraScript("$('#DivMostrarPI').modal('show');")
+        End If
+    End Sub
 
     Private Sub CargaGeoRutas()
         Dim ObjGPS As New ClsGPS
@@ -2186,6 +2271,16 @@ Partial Class GPS_Rastreo
 
         UpGeorutas.Update()
     End Sub
+    Private Sub CargaPI()
+        Dim ObjGPS As New ClsGPS
+        If ObjGPS.PuntoDeInteresGet(-1, UsuarioActual.CveCliente, 1, -1) Then
+            GVPuntosInteres.DataSource = ObjGPS.DtResultados
+        End If
+        ObjGPS.Dispose()
+        GVPuntosInteres.DataBind()
+
+        UpMostarPI.Update()
+    End Sub
 #End Region
 
     Protected Sub GvGrupos_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GvGrupos.RowDataBound
diff --git a/GPS/Rastreo/JS/GeoRutas.js b/GPS/Rastreo/JS/GeoRutas.js
index 0cd74aafc..524d26cf8 100644
--- a/GPS/Rastreo/JS/GeoRutas.js
+++ b/GPS/Rastreo/JS/GeoRutas.js
@@ -4,7 +4,7 @@ var polylinesGeoRutas = [];
 var polybounds = [];
 
 function initGeoRutas() {
-    NuevaConsultaGeoRutas();
+    //NuevaConsultaGeoRutas();
     var upRutasDiv = document.createElement('div');
     var upRutas = new ControlGeoRutas(upRutasDiv, map);
 
@@ -65,6 +65,8 @@ function NuevaConsultaGeoRutas() {
     polylinesGeoRutas = [];
     polybounds = [];
     markersRutas = [];
+
+    $("#LnkMostarGeoRutas").css("display", "block");
 }
 
 function ControlGeoRutas(controlDiv, map) {
@@ -98,7 +100,7 @@ function ControlGeoRutas(controlDiv, map) {
     ControlSub2.style.fontFamily = ' "Open Sans", sans-serif; ';
     ControlSub2.style.msUserSelect = 'none;';
     ControlSub2.style.fontSize = '11px'
-    ControlSub2.style.display = 'block'
+    ControlSub2.style.display = 'none'
     ControlSub2.style.backgroundColor = 'rgb(255,255,255)'
     ControlSub2.style.padding = '11px'
     ControlSub2.style.backgroundClip = 'padding-box'
diff --git a/GPS/Rastreo/JS/Geocercas.js b/GPS/Rastreo/JS/Geocercas.js
new file mode 100644
index 000000000..d5d3f445f
--- /dev/null
+++ b/GPS/Rastreo/JS/Geocercas.js
@@ -0,0 +1,138 @@
+//REGION GEOCERCAS
+var polygonsGeocercas = [];
+var markersGeo = [];
+var IsGeoVisibles = false;
+
+function initGeocercas() {
+    //NuevaConsultaGeoCercas();
+    var upGeoDiv = document.createElement('div');
+    var upGeo = new ControlGeocercas(upGeoDiv, map);
+
+    map.controls[google.maps.ControlPosition.TOP_LEFT].push(upGeoDiv);
+}
+
+function NuevaConsultaGeoCercas() {
+    HideGeocercas();
+    DeleteGeocercas();
+
+    $("#LnkMostarGeocercas").css("display", "block");
+}
+
+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);
+}
+
+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();
+    });
+}
+//END REGION
\ No newline at end of file
diff --git a/GPS/Rastreo/JS/PuntosDeInteres.js b/GPS/Rastreo/JS/PuntosDeInteres.js
new file mode 100644
index 000000000..b174240bc
--- /dev/null
+++ b/GPS/Rastreo/JS/PuntosDeInteres.js
@@ -0,0 +1,108 @@
+//REGION PUNTOS DE INTERES
+var markersPI = [];
+
+function initPI() {
+    //NuevaConsultaPI();
+    var upRutasDiv = document.createElement('div');
+    var upRutas = new ControlPI(upRutasDiv, map);
+
+    map.controls[google.maps.ControlPosition.TOP_LEFT].push(upRutasDiv);
+}
+
+function CreaMarcadorPI(coords, nomEquipo) {
+    var marker = new google.maps.Marker({
+        position: coords,
+        title: nomEquipo,
+        map: map
+    });
+
+    var infowindow = new google.maps.InfoWindow({
+        content: '<h4><b>' + nomEquipo + '</b></h4>'
+    });
+
+    marker.addListener('click', function () {
+        closeLastOpenedInfoWindow();
+        infowindow.open(map, marker);
+        lastOpenedInfoWindow = infowindow;
+    });
+
+    markersPI.push(marker);
+}
+
+function NuevaConsultaPI() {
+    for (var j = 0; j < markersPI.length; j++) {
+        markersPI[j].setMap(null);
+    }
+    markersPI = [];
+    $("#LnkMostarPI").css("display", "block");
+}
+
+function ControlPI(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 = "LnkMostarPI"
+    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 Puntos de Interés'
+    ControlSub1.appendChild(ControlSub2)
+
+    ControlSub1.addEventListener('click', function () {
+        VerPI();
+    });
+}
+
+var IsPIVisible = false;
+
+function VerPI() {
+    if (IsPIVisible) {
+        HidePI();
+        IsPIVisible = false;
+    } else {
+        CargaPI();
+        IsPIVisible = true;
+    }
+}
+
+function HidePI() {
+    for (var j = 0; j < markersPI.length; j++) {
+        markersPI[j].setMap(null);
+    }
+}
+
+function CargaPI() {
+    for (var i = 0; i < markersPI.length; i++) {
+        markersPI[i].setMap(map);
+    }
+}
\ No newline at end of file