Pick up Location and Drop Location line draw in 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 How to Get User Location Using IP Address In PHP.

HTML Code

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

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>

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"],