php - mysqlからの「日付」値ごとにGoogleマップで新しいポリラインを生成する

Question

編集： 私は私の問題を解決するために過去数週間にわたって試みています。私は真の初心者なので、作業の進行中にコードを学んでいます...私は自分の質問を明確にして、うまくいけば答えを教えてくれるように努めます。

以前に尋ねていたように：私はGoogleマップAPI 3に基づいてWebアプリを開発しています。GPSロガーはMysqlサーバー上のテーブルにid、緯度、経度、日付、時刻、ユーザーIDの値を供給しています。複数のユニークなポリラインを作成したい。日付グループごとに、新しいポリライン。

私が言っていたように、私はある程度の進歩を遂げましたが、私が正しい軌道に乗っているかどうかはよくわかりません。

何が接続されているかわからないので、接続されているいくつかのポリラインが大きなポリラインまたはいくつかのポリラインになります...別の問題は、このコードでは表示できないように見えることです。最初の「日付グループポリライン」。

元のコードの下に新しいコードと>> jsfiddle <<リンクを投稿しました（ただし、jsfiddleを自分の側で機能させることはできませんでした）。

これはもはやGoogleマップの質問ではないと思いますが、誰かが私にそれを解決して理解するのを手伝ってくれたらありがたいです。

これは私が以前に投稿したコード部分です：

var map = new google.maps.Map(document.getElementById('map'), myOptions);
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("output-xml.php", function(data) 
  {
    var points=[];
    var markerbgn=[];
    var markerend=[];
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) 
    {
      var date = markers[i].getAttribute("date");
      var time = markers[i].getAttribute("time");
      var timebgn = markers[0].getAttribute("time");
      var timeend = markers[markers.length-1].getAttribute("time");
      var type = markers[i].getAttribute("usid");

          points[i] = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));

      var html1 = "<b>" + date + "</b> <br/>" + timebgn + "</b> <br/>" + "Start Point";
      var html2 = "<b>" + date + "</b> <br/>" + timeend + "</b> <br/>" + "End Point";
      var content2 = "<b>" + "User: " + type + "</b> <br/>" + date + "</b> <br/>" + "User Route";

    var encoded_path = google.maps.geometry.encoding.encodePath(points);         
    console.log(encoded_path);

    }

    var decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);

    // Polyline
    var polyOptions = {
      path: decoded_path,
      map: map,
      clickable: true,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    }

    //line text
    var info = decoded_path;

    // Polyline
    var polyline = new google.maps.Polyline(polyOptions);
    polyline.setMap(map);
    createInfoWindow(polyline, map, infoWindow, content2);

これは新しいコードです：

var map = new google.maps.Map(document.getElementById('map'), myOptions);
var infoWindow = new google.maps.InfoWindow();

// Change this depending on the name of your PHP file
downloadUrl("output-xml.php", function(data) {
    var markerbgn=[];
    var markerend=[];
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    var routeNum = [];
    var mPoints =[]; 

    for (var i = 0; i < markers.length-1; i++) {

        var date = markers[i].getAttribute("date").split("-").join("");
        var dateAdv = markers[i+1].getAttribute("date").split("-").join("");
        var datePrv = [];
        var dateEnd = markers[markers.length-1].getAttribute("date").split("-").join("");
        var time = markers[i].getAttribute("time");
        var timebgn = markers[0].getAttribute("time");
        var timeend = markers[markers.length-1].getAttribute("time");
        var type = markers[i].getAttribute("usid");
        var routesCng=[];
        var points=[];

        if (dateAdv != date){
            if (!routesCng) routesCng=[];
            routesCng = i;
            routeNum++;

            for (var k = 0; k < markers.length; k++) {  
                points.push(new google.maps.LatLng(
                parseFloat(markers[k].getAttribute("lat")),
                parseFloat(markers[k].getAttribute("lng"))));
            }
                        setPoints();
                        setPolyline();      
        }
        //alert([datePrv,time,dateAdv]); //**********************************
        var html1 = "<b>" + date + "</b> <br/>" + timebgn + "</b> <br/>" + "Start Point";
        var html2 = "<b>" + date + "</b> <br/>" + timeend + "</b> <br/>" + "End Point";
        var content2 = "<b>" + type + "</b> <br/>" + dateAdv + "</b> <br/>" + "User Route";
    }       
    function setPoints() {
        mPoints = points.splice([routesCng]);
            //alert([date,routesCng,dateAdv,routeNum]);

    }

    function setPolyline() {
        alert([date,routesCng,dateAdv,routeNum,mPoints]);
        var encoded_path = google.maps.geometry.encoding.encodePath(mPoints);
            console.log(encoded_path);
        var decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);
        var polyOptions = {
                path: decoded_path,
                map: map,
                clickable: true,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            }
        // Polyline
        var polyline = new google.maps.Polyline(polyOptions);

        //line text
        var info = decoded_path;
        polyline.setMap(map);

        createInfoWindow(polyline, map, infoWindow, content2);

        if(decoded_path.length!=0){  
            markerbgn = new google.maps.Marker({
                map: map,
                position: decoded_path[0],
                draggable: false,
                visible: true
            });
        markerend = new google.maps.Marker({
            map: map,
            position: decoded_path[decoded_path.length-1],
            draggable: false,
            visible: true
            });
        bindInfoWindow(markerbgn, map, infoWindow, html1);
        bindInfoWindow(markerend, map, infoWindow, html2);
        }
    }   
});

どんな助けでも大歓迎です！