Google Distance Matrix returning empty array of object

Question

I'm trying to combine Google's distance matrix and places library where I would first search for police station around my origin in which it would return me the latitude and longitude of each police station where i would append each of the values into an array to pass it to distanceMatrix destination. As of now there isn't any error but when i tried to log the results from the callback function it returns me an empty array of objects.

Current Issue

When trying to log the results from the callback function of distanceMatrixService, it returns an empty array of objects

Normally it should look like this

Codes

The codes are quite lengthy but every parts are essential and are interconnected to each other.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places"></script>


var map;
var infoWindow;
var markers = [];
var serviceMatrix

//Array Containing all lng/lat of police station
var allPoliceLocation = [];
var origin1 = new google.maps.LatLng(3.120231, 101.595247);

//Default Dummy Data
// var destinationA = new google.maps.LatLng(3.117386, 101.635133);
// var destinationB = new google.maps.LatLng(3.117386, 101.635333);

function initMap() {

    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 15,
        center: origin1
    });

    var request = {
        location: origin1,
        radius: 3000,
        types: ["police"]
    };

    infoWindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
}

function createMarker(place) {
    var placeLat = place.geometry.location.lat();
    var placeLng = place.geometry.location.lng();

    createLatLng(placeLat, placeLng);

    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
    });

    var homeMarker = new google.maps.Marker({
        position: {
            lat: 3.120231,
            lng: 101.595247
        },
        map: map,
        icon: {
            url:
                "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
        }
    });

    google.maps.event.addListener(homeMarker, "click", function () {
        infoWindow.setContent(place.name);
    });

    google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(place.name);
        infoWindow.open(map, this);
    });

    return marker;
}

function createLatLng(lat, lng) {
    var newLocation = new google.maps.LatLng(lat, lng);
    allPoliceLocation.push(newLocation);
}


(function () {

    //This does returns all the object of LatLng created from createLatLng function
    console.log(allPoliceLocation);
    serviceMatrix = new google.maps.DistanceMatrixService();
    serviceMatrix.getDistanceMatrix(
        {
            origins: [origin1],
            destinations: allPoliceLocation,
            travelMode: "DRIVING",
            avoidHighways: false,
            avoidTolls: true
        },
        function (status,results) {

            //Returns empty array here 
            console.log(results);

            //Invalid Request
            console.log(status);
        }
    );
})();


function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {

            //Create a new marker for every new police station
            markers.push(createMarker(results[i]));
        }
    }

}

google.maps.event.addDomListener(window, "load", initMap);

EDIT

I have added a second param to the callback function to check the status and it returned INVALID_REQUEST. I have also tried manually adding my 2 dummy data into an array and passing it as the destination arr while logging it and it seems to be different compared to my allPoliceLocation array.

score 0 · Answer 1 · answered Nov 25 '19 at 06:26

Solved

Managed to find a "hacky" way to solved it, apparently i suspected that the distanceMatrix function ran before the data had been pushed into the array which is why it shows an empty array. Here is how i solved it.

var allPoliceLocation = [];

function createLatLng(results) {

    results.forEach(result => {
        const lat = result.geometry.location.lat();
        const lng = result.geometry.location.lng();


        newLocation = new google.maps.LatLng(lat, lng);

        allPoliceLocation.push(newLocation);

    });

    getMatrixDistance(allPoliceLocation);
}

function getMatrixDistance(destination) {

    console.log("here");
    serviceMatrix = new google.maps.DistanceMatrixService();
    serviceMatrix.getDistanceMatrix(
        {
            origins: [origin1],
            destinations: destination,
            travelMode: "DRIVING",
            avoidHighways: false,
            avoidTolls: true
        },
        function (results, status) {

            console.log(results);

        }
    )
}


function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {

            //Create a new marker for every new police station
            markers.push(createMarker(results[i]));

        }
        createLatLng(results);
    }
}

Google Distance Matrix returning empty array of object

1 Answers1