JSFiddle - React, Tailwind, and code Playground

by rodrigorf

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://raw.githubusercontent.com/combatwombat/marker-animate/master/markerAnimate.js"></script>
    <div class="">
	    <div id="" style="height: 460px;">
             <div id="map_canvas" style="position: absolute; top: 10%;  left: 0%; width: 100%; height: 765px"></div>
             <div id="log"></div>			
        </div>
    </div>

JavaScript

//Icons
        var customIcons = {
            airport: {
                icon: 'http://transfer-online.net/rio2016triplem/gps/images/AirPort.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            hotelothon: {
                icon: 'http://transfer-online.net/rio2016triplem/gps/images/othon.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
        };

        var infoWindow = null;
        var map = null;
        var markersArray = [];
        var nextPosGPS = 0;
        var data = gerarArrayPosicoesGPS();

        initialize();

        function initialize()
        {
            var myLatlng = new google.maps.LatLng(-22.91729049, -43.18914413);
            var myOptions = {
                zoom: 14,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);

            var pink_parks = [];
            map.setOptions({
                styles: pink_parks
            });

            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);

            infoWindow = new google.maps.InfoWindow;
            updateMaps();
            window.setInterval(updateMaps, 10000);
        }

        function clearOverlays()
        {
            for (var i = 0; i < markersArray.length; i++) {
                markersArray[i].setMap(null);
            }
        }

        function updateMaps()
        {
            nextPos = nextPosGPS + 1;
            clearOverlays();
            //console.log("pos:" + nextPos);
            //console.log("x:" + data[nextPos].x + ", y:" + data[nextPos].y);
            //console.log(markersArray.length);

            var marker = [];
            var...