0

I tried something like this

<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>

Please guide me set value for var locations from json data source.

These line is not satisfy me (but I don't know how to change it)

    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.
    }
    //

The true format must be like the sample from Google Maps

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 }
];
4
  • locations.push({lng: json['results'][i]['longitude'], lat: json['results'][i]['latitude']}); should be enough if I correctly understood your problem. Commented Dec 7, 2020 at 9:07
  • Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help -> xhr.spec.whatwg.org/#the-open()-method Commented Dec 7, 2020 at 9:08
  • I need a pragmatic solution, Andreas is true, but I don't know/need improve it now. @briosheje seemly it is what I need, thank you! Commented Dec 7, 2020 at 9:08
  • @briosheje it works, let's post your answer. Commented Dec 7, 2020 at 9:17

1 Answer 1

1

Just push an object instead:

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

beware that you shouldn't use synchronous http requests.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.