<script charset="utf-8">
    var request = new XMLHttpRequest();
    // request.open("POST", "https://localhost:8443/control/jqxGeneralServicer?sname=JQGetListCustomerByCluster&deliveryClusterId=120120", false);
    request.open("POST", "https://localhost:8443/control/jqxGeneralServicer?sname=JQGetListCustomerByCluster&deliveryClusterId=${deliveryCluster.deliveryClusterId}", false);
    
    // ${deliveryCluster.deliveryClusterId}
    request.setRequestHeader('Content-Type', 'application/json');
    request.send(null);
    var foo = request.responseText;
    var json = JSON.parse(foo);
    // console.log(json["results"][0]);
    var labels = new Array();
    var locations = new Array();
    for(i = 0; i < json["results"].length; i++){
         labels.push(json["results"][i]["fullName"]);
         locacations["lng"] = json["results"][i]["longitude"];
         locacations["lat"] = json["results"][i]["latitude"];
    }
    // console.log(labels) ;   

        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 16,
                center: {lat: 20.993514917846174, lng: 105.78660475957122},
            });
            // const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
             //const labels = [
            //   "Cửa hàng Quang Anh",
             //   "Cửa hàng Quang Em",
             //   "Cửa hàng Hưng Thịnh",
             //   "Cửa hàng Cửa hàng Thành Hưng"];

            var locations = [
                { lat: 20.9935851166474, lng: 105.78857910579417 },
                { lat: 20.986910834987295, lng: 105.78535398147808 },
                { lat: 20.990339683019226, lng: 105.7922698253056 },
                { lat: 20.996770381033244, lng: 105.79321396285934 }
            ];

            const markers = locations.map((location, i) => {
                return new google.maps.Marker({
                    position: location,
                    label: labels[i],
                    //label: labels[i % labels.length],
                });
            });

            new MarkerClusterer(map, markers, {
                imagePath:
                    "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
            });

            const ecolife = {lat: 20.993514917846174, lng: 105.78660475957122};

            // const map22 = new google.maps.Map(document.getElementById("map"), {
            //     zoom: 18,
            //     center: ecolife,
            // });
            // const marker = new google.maps.Marker({
            //     position: ecolife,
            //     map: map22,
            // });
        }


    </script>


<div id="map" style="height: 400px; width: 100%; margin: 0px 10px 10px 10px;"></div>

    for(i = 0; i < json["results"].length; i++){
         labels.push(json["results"][i]["fullName"]);// this line is ok for variable `labels`
         locacations["lng"] = json["results"][i]["longitude"]; // these lines is not ok
         locacations["lat"] = json["results"][i]["latitude"]; // these lines is not ok.
    }
    //

const locations = [
    { lat: 20.9935851166474, lng: 105.78857910579417 },
    { lat: 20.986910834987295, lng: 105.78535398147808 },
    { lat: 20.990339683019226, lng: 105.7922698253056 },
    { lat: 20.996770381033244, lng: 105.79321396285934 }
];

locations.push({lng: json['results'][i]['longitude'], lat: json['results'][i]['latitude']});