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.
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>
Leave a Reply