Drawing route on map, with multiple markers, CodeIgniter - php

Question

I did my searching but unfortunately didnt find relevant solution. I want to do it by using codeigniter google map library. i am following this
link
But it is just showing starting and ending point, it's not creating multiple pins like
This is making multiple pins with polyline but i want routing like:
with multiple pins as shown in polyline map picture.. Is it posible to get multiple directions with multiple pins ??
I tried it but my trick couldn't work. i tried it by using while loop and i incremented the variable before ending point to make my direction like
1st lat, long : starting point
2nd lat, long : ending point
2nd lat, long : starting point
3rd lat, long : ending point
3rd lat, long : starting point
4th lat, long : ending point
But it's only making 1st and last ending point for start and end direction
Here is my controller function
##Load library
$this->load->library('googlemaps');
## Getting data from db
$final_data['final_data'] = $this->Main_manager->getAllEmailLogsById($id);
$email = $final_data['final_data'][0]['email'];
$date = $final_data['final_data'][0]['date'];
$file = 'assets/email_logs/'.$email.'-'.str_replace(' ','-',$date).'.txt';
## Getting lat long data from txt file
$logData = file_get_contents($file);
$logData = json_decode($logData, true);
$marker = array();
$logs = count($logData['logs']);
$config['center'] = $final_data['final_data'][0]['lat'].','. $final_data['final_data'][0]['long'];
$config['zoom'] = 'auto';
$i=0;
while($i<$logs-1):
$config['position'] = $logData['logs'][$i]['lat'].','. $logData['logs'][$i]['long'];
$config['infowindow_content'] = $logs['email'];
$config['animation'] = 'DROP';
$config['draggable'] = FALSE;
$config['directions'] = TRUE;
$config['directionsStart'] = $logData['logs'][$i]['lat'].','. $logData['logs'][$i]['long'];
$i++;
$config['directionsEnd'] = $logData['logs'][$i]['lat'].','. $logData['logs'][$i]['long'];
$config['directionsDivID'] = 'directionsDiv';
endwhile;
## initialize the map
$this->googlemaps->initialize($config);
##create map
$final_data['map'] = $this->googlemaps->create_map();
$this->load->view('administrator/header');
$this->load->view('administrator/view_logs_detail', $final_data);

Answer 1

It seems like you need to use google's DirectionsService.
This service Google map API key to draw routes
Get google key from here login to google account and generate key for your project
Working Demo
HTML
<h1>Google Map direction service</h1>
<div id="map"></div>
CSS
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JS:
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = [
['Shahrah-e-Faisal, Karachi, Pakistan', 24.8678, 67.0842, 1],
['Tariq Rd, Karachi, Pakistan', 24.8727, 67.0604, 2],
['Service Lane, Karachi, Pakistan', 24.8161, 67.0212, 3]
];
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(24.8678, 67.0842),
});
directionsDisplay.setMap(map);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var request = {
travelMode: google.maps.TravelMode.DRIVING
};
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
if (i == 0) request.origin = marker.getPosition();
else if (i == locations.length - 1) request.destination = marker.getPosition();
else {
if (!request.waypoints) request.waypoints = [];
request.waypoints.push({
location: marker.getPosition(),
stopover: true
});
}
}
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);