Home » Javascript » Not able to generate animated google map with respect to time using .csv

Not able to generate animated google map with respect to time using .csv

Posted by: admin November 1, 2017 Leave a comment

Questions:

I am trying to make an animated google map using data from .csv. The path should move with increase in time. Also, I should find path till the time period entered on the text box. So with my current code if I enter the time period in the text box so I get the full path, not the path covered till the particular time period value entered in the text box. I have made the code using these links-: https://github.com/duncancumming/maps/blob/master/animatedPaths/animated%20csv.html and Animation of Google Maps Polyline with respect to time increase.

Below is my code. Pls let me know where I am going wrong. Thanks a lot in advance!Probably the “timetill” value in drawline() is getting undefined, I am not sure.

<!DOCTYPE html>
<html>
<head>
<title>Animated path via a csv file</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map, #wrapper {
  height: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
}

#over_map {
position: absolute;
top: 10px;
left: 40%;
z-index: 99;
}


</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script>
    var allCoords = [];
    var map, route, marker;

    function getCoords() {
        $.ajax({
            url: 'subject1.csv',
            dataType: 'text',
            success: function(data) {
                var lines = data.split(/[\r\n]+/);

                lines.forEach(function(line){
                    allCoords.push(line.split(','));
                });
                var bounds = new google.maps.LatLngBounds();
                allCoords.forEach(function(coords){
                bounds.extend(new google.maps.LatLng(coords[0], coords[1]));
                });

                map.fitBounds(bounds);

                drawLine();
            }
        });
    }

    function drawLine(timetill) {
        console.log(timetill)
        route = new google.maps.Polyline({
            path: [],
            geodesic : true,
            strokeColor: '#FF0000',
            strokeOpacity: 0.7,
            strokeWeight: 2,
            editable: false,
            map:map
        });

        marker = new google.maps.Marker({
            map: map,
            icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
        });

        for (var i = 0; i < allCoords.length; i++) {
            if(timetill!=undefined && timetill!="" && 
    timetill<allCoords[i].time){
            break;
            }
            window.setTimeout(updatePath, 50 * i, allCoords[i]);
        }
    }
    function updatePath(coords) {
        console.log(coords);
        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        route.getPath().push(latLng);
        marker.setPosition(latLng);
    }

    function initialize() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {lat: 30.6010548, lng: -96.3534677},
          zoom: 24,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        getCoords();
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    function plotTill(value){
        console.log(value)
    route.setMap(null)
    marker.setMap(null);
    drawLine(value)
    }


    </script>

    </head>
    <body>

    <div id="wrapper">
    <div id="map"></div>

    <div id="over_map">
    <input type="text" placeholder="Enter second ex: 2" id="search_box" 
    onchange="plotTill(this.value)" />
    </div>
    </div>

    </body>
    </html>

My .csv file is stored on the local machine and this is how my .csv file looks-: The third column is for time.

30.6011525,-96.3546702,1
30.6011525,-96.3546703,2
30.6011525,-96.3546703,3
30.6011525,-96.3546703,4
30.6011525,-96.3546703,5
30.6011525,-96.3546703,6
30.6011525,-96.3546703,7
30.6011525,-96.3546703,8
30.6011525,-96.3546703,9
30.6011525,-96.3546703,10
30.6011525,-96.3546703,11
Answers:

ok, here’s a working example that I think does mostly what you’re wanting. I’ve reduced the time between each update of the line to 5 milliseconds.

    function getCoords() {
        $.ajax({
            url: 'toyotav2.csv',
            dataType: 'text',
            success: function(data) {
                var lines = data.split(/[\r\n]+/);

                lines.forEach(function(line){
                    allCoords.push(line.split(','));
                });

                setUpLine();
            }
        });
    }

    function setUpLine() {
        route = new google.maps.Polyline({
            path: [],
            geodesic : true,
            strokeColor: '#FF0000',
            strokeOpacity: 0.7,
            strokeWeight: 2,
            editable: false,
            map:map
        });

        marker = new google.maps.Marker({
            map: map,
            position: {lat: 0, lng: 0},
            visible: false,
            icon: "https://maps.google.com/mapfiles/ms/micons/blue.png"
        });
    }

    function drawLine(timetill) {       
        for (var i = 0; i < allCoords.length; i++) {
            if (timetill < allCoords[i][2]){
                break;
            }
            window.setTimeout(updatePath, 1000 * i, allCoords[i]);
        }
    }

    function updatePath(coords) {
        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        route.getPath().push(latLng);
        marker.setPosition(latLng);
    }

    function initialize() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {lat: 30.6010548, lng: -96.3534677},
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        getCoords();
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    function plotTill(value) {
        route.setPath([]);
        marker.setVisible(true);
        drawLine(parseInt(value, 10));
    }

Some key distinctions:

You didn’t specify a position when creating the Marker, which is required. I’ve just set it to {0,0}, but also specified its visible property to false to begin with, but set it to visible when you start drawing the line.

When you read the value from the input field, you’re getting it as a text value. I use parseInt() to make sure it’s converted to an integer.

Instead of setting the map to null for the marker and polyline, just clear the path.

I’ve also split out the drawLine function, so you create the marker and polyline straight after the ajax response, but only start drawing the line in response to the user input.