Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

Pick up Location and Drop Location line draw in google map API using javascript

php ajax javascript jquery
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.


<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


Google map javascript File Call with API and initMap function call

<script src=""
         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"],


Html code work in comment box

Related Post