JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

var togglePlay = {
	options:{
		map:{},
		data:[],		
		lastPathTime : -1,
		currentTime : 0,		
		intervalTime : 10,
		startIndex : {},
   	endIndex : false,
		pathLine : false,
		positionMarker : false,
		animationPlaying : false,
		animationStep : {},
		timeHome:'',
		timneEnd:{},
	   animationTime : 0,
	   animationHandle : false,
	   load: false
	},
   reset: function(){
      this.options.animationPlaying = false;
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'realPathBus'});
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'stopsBus'});
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'homeAndEndLocation'});
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'gasStation'});
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'projected'});
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'degreesBus'});    
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'branchesBus'});      
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'IdBusHomeEnd'});
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'homeOperator'});  
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'stopProjected'}); //onOff
      $('#ContainerMap').gmap3({action:'clear', name:[], tag:'onOff'});
      this.options.map = {};
      this.options.data = [];    
      this.options.lastPathTime = -1;
      this.options.currentTime = 0;   
      this.options.intervalTime = 10;
      this.options.startIndex = {};
      this.options.endIndex = false;
      this.options.pathLine = false;
      this.options.positionMarker = false;
      this.options.animationPlaying = false;
      this.options.animationStep = '';
      this.options.timeHome = '';
      this.options.timneEnd = '';
      this.options.animationTime = 0;
      this.options.animationHandle = false;
      this.options.load = false;
       var playButton = this.options.animationPlaying? 'map/view/images/pause.png' :...

JavaScript

var geoNavstarMap = {
	options:{
		Routes:[],
		map:{},
		realTime:false,
		currentPosition:[],
		currentPosition:{
			 latLng:[], stop: false, limitTime:1, startTime:0, endTime:0, intervalTime:{}, clock: {},
			 setClock: function(){
			 	var _clock =  new Date();
			 	$('#txtClock').html( _clock.getHours() +':'+ _clock.getMinutes() +':'+ _clock.getSeconds());
			 },
			 loadLatLgn: function(){
			 	geoNavstarMap.options.baseParams.xaction = 'getCurrentPath';
			 	$.ajax({
					type: "POST",
					url: 'map/modelo/geoNavstarMap.php',
					data: geoNavstarMap.options.baseParams,
					dataType:'json',
					success: function(response){
						geoNavstarMap.setcurrentPosition({latitud:parseFloat(response.lastPointBus[0]['latitud']), longitud: parseFloat(response.lastPointBus[0]['longitud']), hr: response.lastPointBus[0]['UTC_time'], degrees:response.lastPointBus[0]['grados'], velocidad: response.lastPointBus[0]['velocidad'] });				
						$('#ContainerMap').gmap3({action:'clear', name:[], tag:'IdBus'});
						var _tagLng = [ { lat: parseFloat(response.lastPointBus[0]['latitud']), lng: (-1)*parseFloat(response.lastPointBus[0]['longitud']), tag: 'IdBus', data: response }];
						$('#ContainerMap').gmap3({ action: 'addMarker',
							latLng:  [parseFloat(response.lastPointBus[0]['latitud']), (-1)*parseFloat(response.lastPointBus[0]['longitud'])],							
							map:{ center: true, zoom: 14},
							marker:{ tag:'IdBus', options:{ draggable: false, icon: 'map/view/images/unidad_point.png' },
								callback : function(latLng){
									geoNavstarMap.getAddress(
										{latitud: parseFloat(response.lastPointBus[0]['latitud']), longitud: parseFloat(response.lastPointBus[0]['longitud']) },
										function( address ){ $('#dashboardAddress').html(address);}
									);
								}
							}             
				        });		
					},
					error: function(){
						alert('Por favor verifique su conexión a Internet y vuelva a intentarlo, Si el problema persiste contacte a:...