Read text file draw line between two points google map API using javascript

Maps can be a very powerful tool when visualizing the patterns in a dataset that is related to location in some way. This relation could be the name of a place, a specific latitude and longitude value, or the name of an area that has a specific boundary like a census tract or a postal code. You may also like How to get latitude and longitude from google map using PHP and Pick up Location and Drop Location line draw in google map API using javascript.

HTML Code

<div class="map" id="map" style="height:400px"></div>

app_1.txt File

[37.331821,-122.030386,"2017-05-18 14:10:02"],[37.331761,-122.030664,"2017-05-18 14:10:08"],[37.331504,-122.030716,"2017-05-18 14:10:15"],[37.331246,-122.030737,"2017-05-18 14:10:22"],[37.331013,-122.030655,"2017-05-18 14:10:29"],[37.330778,-122.030561,"2017-05-18 14:10:36"],[37.330684,-122.030280,"2017-05-18 14:10:44"],[37.330678,-122.029988,"2017-05-18 14:10:52"],[37.330696,-122.029671,"2017-05-18 14:10:59"],[37.330695,-122.029383,"2017-05-18 14:11:05"],[37.330693,-122.029067,"2017-05-18 14:11:12"],[37.330556,-122.028843,"2017-05-18 14:11:19"],[37.330420,-122.028600,"2017-05-18 14:11:26"],[37.330344,-122.028303,"2017-05-18 14:11:34"],[37.330282,-122.027999,"2017-05-18 14:11:41"],[37.330260,-122.027685,"2017-05-18 14:11:47"],[37.330250,-122.027386,"2017-05-18 14:11:53"],[37.330236,-122.027101,"2017-05-18 14:11:59"],[37.330223,-122.026811,"2017-05-18 14:12:05"],[37.330207,-122.026487,"2017-05-18 14:12:12"],

Javascript Code

function initMap() 
{
    var map = new google.maps.Map(document.getElementById('map'));
    var driverfile = 'ride_location/app_1.txt';
    $.get(driverfile, function(data) {
    var finalpush = [];
    var bounds = new google.maps.LatLngBounds();
    var  jsonObj  =  JSON.parse("["+data.replace(/,\s*$/, "")+"]");    


    var pickup_lati = $('#pickup_lati').val();
    var pickup_longi = $('#pickup_longi').val();
    var drop_lati = $('#drop_lati').val();
    var drop_longi = $('#drop_longi').val();

    var PickupLocation = {lat: parseFloat(pickup_lati), lng: parseFloat(pickup_longi)};
    var pickup = new google.maps.Marker({
        position: PickupLocation,
        map: map,
        title: 'Pickup Location!'
    });

    var DropLocation = {lat: parseFloat(drop_lati), lng: parseFloat(drop_longi)};
    var drop = new google.maps.Marker({
        position: DropLocation,
        map: map,
        title: 'Drop Location!'
    });

    for (var i = 0; i < jsonObj.length; i++) {
         finalpush[i]= {lat:jsonObj[i][0] , lng: jsonObj[i][1]};
         bounds.extend({lat:jsonObj[i][0] , lng: jsonObj[i][1]});
    }

    var flightPath = new google.maps.Polyline({
          path: finalpush,
          geodesic: true,
          strokeColor: '#00FF00',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
        bounds.getCenter();
        map.fitBounds(bounds);
    });
}

Google map javascript File Call with API and initMap function call

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap"
         async defer></script>