在地图上绘制路线，具有多个标记，CodeIgniter

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

1. 1st lat, long : starting point
2. 2nd lat, long : ending point
3. 2nd lat, long : starting point
4. 3rd lat, long : ending point
5. 3rd lat, long : starting point
6. 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);