Create the right path for navigation

Question

I need to create a navigation path for ships. All ships come to the center and stop there for a while. The coordinates of the ships and the central point (MotherShip) come from the database.

Code for selecting data. The center point is static.

<?php
    $sqlqry = "SELECT * FROM ship WHERE id=" . $id . " AND start_date BETWEEN '" . $s_date . "' AND '" . $e_date . "'";
    $result = mysqli_query($bd, $sqlqry);
    $locations = array();
    $counter=0;
    while($row = mysqli_fetch_array($result)) {
        array_push($locations, $row);
    }
    $nrows = mysqli_num_rows($result);
?>

The problem is that there are several ships that start from a central point in the water. They should begin and end on land.

As here, you can see one ship at the beginning of the red line (land) and one at the beginning of the green line (in the water, where the center point is).

Here is my JavaScript JavaScript part for the initialization part.

var nrows = <?php echo json_encode($nrows,JSON_NUMERIC_CHECK);?>;
    var locMatrix = <?php echo json_encode($locations,JSON_NUMERIC_CHECK);?>;
    var m_ship_rows = <?php echo json_encode($m_ship_rows,JSON_NUMERIC_CHECK);?>;
    var m_ship = <?php echo json_encode($m_ship,JSON_NUMERIC_CHECK);?>;

      var line;
      var line1;
      var lineArray = [];
      var lineArray1 = [];
      var DrivePath = [];
      // This example adds an animated symbol to a polyline.

      function initMap() {

        var intervalForAnimation;
        var count = 0;
        var n = 2;
        for(var i=0;i<=nrows-1;i++)
        {
        console.log(DrivePath[i]);
        DrivePath.push(new google.maps.LatLng(locMatrix[i][1], locMatrix[i][2]),
                  new google.maps.LatLng(17.8674, 66.543),
                  new google.maps.LatLng(locMatrix[i][3], locMatrix[i][4]));
      }
        var Colors = [
        "#FF0000", 
        "#00FF00", 
        "#0000FF", 
        "#FFFFFF", 
        "#000000", 
        "#FFFF00", 
        "#00FFFF", 
        "#FF00FF"
        ];

All code is in JSFiddle .

You can also visit my github repo for all the code.

http://github.com/Tejas-Nanaware/ship-scheduling-and-animation-tool

Answer 1

, , .

// Create the polyline and add the symbol to it via the 'icons' property.
        for(var i=0; i <=nrows; i++)
        {
          var line = new google.maps.Polyline({
            path: [{lat: locMatrix[i][1], lng: locMatrix[i][2]},
            {lat: 17.8674, lng: 66.543},
            {lat: locMatrix[i][3], lng: locMatrix[i][4]}],
            icons: [{
              icon: lineSymbol,
              offset: '100%'
          }],
          strokeColor: '#000000',
          strokeOpacity: 1.0,
          map: map
      });
          animateCircle(line);
      }

animateCircle():

function animateCircle(line) {
          var count = 0;
          window.setInterval(function() {
            count = (count+0.5) % 200;
            var icons = line.get('icons');
            icons[0].offset = (count / 2) + '%';
            line.set('icons', icons);
        }, 20);
      }

Answer 2

, , . , , , , , . , , , , . , . , . , , .