angular $q and google.maps.api

Question

I'm struggleling since hours trying to understand how is working $q. I'm trying to make it works with a function from the google.maps api but I'm definitely not able to answer it by myself or maybe I totally don't understand $q. I hope you'll be able to help me or at least give me some explanation.

Here is a very simple example of what I would like to do :

var geocoder = new google.maps.Geocoder();
let promise1 = geocoder.geocode({address: "someAddress"});
let promise2 = geocoder.geocode({address: "someOtherAddress"});
$q.all([promise1, promise2]).then(data => { 
    console.log(data) 
});

//The ouput I get is : [undefined, undefined] but it's definitely not what I expect :P

Where am I wrong ? Here is the original async method from google api which works fine.

var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: "someAddress"}, function(response, status){
    if(status === 'ok')
        //Do what I need with the response
    else
        //Do something else
});

The thing is I want to do do something with multiple requests, not only one. So I need to store all the responses (and wait for them to be stored as it's an async function) before doing something. That's why I try to use $q to reach my goal.

PS: Maybe it's a double thread because I saw a lot of discussion about $q but even after hours of researches I can't find an issue... So please don't tell me to google it.

Thanks by advance for your help !

score 1 · Accepted Answer · answered Oct 24 '17 at 02:28

.geocode doesn't return a Promise, it uses a callback (as you know) and returns undefined as you've found out

You can make a "promisified" geocode function, along the lines of

const geocodePromise = (geocoder, params) => new Promise((resolve, reject)  => {
    geocoder.geocode(params, function(response, status) {
        if (status == 'ok') resolve(response);
        else reject(status);
    });
});

var geocoder = new google.maps.Geocoder();
let promise1 = geocodePromise(geocoder, {address: "someAddress"});
let promise2 = geocodePromise(geocoder, {address: "someOtherAddress"});
$q.all([promise1, promise2]).then(data => { 
    console.log(data) 
});

or

google.maps.Geocoder.geocodeP = function geocodeP(params) {
    return new Promise((resolve, reject)  => {
        this.geocode(params, function(response, status) {
            if (status == 'ok') resolve(response);
            else reject(status);
        });
    });
};
var geocoder = new google.maps.Geocoder();
let promise1 = geocoder.geocodeP({address: "someAddress"});
let promise2 = geocoder.geocodeP({address: "someOtherAddress"});
$q.all([promise1, promise2]).then(data => { 
    console.log(data) 
});

Thanks a lots !!! I tried your first proposition and it works perfectely. In fact I tought $q was waiting for the geocode functions and callbacks to finish, I didnt understand I had to 'transform' them in promises first. Now its more clear to me :) — Dardena7, Oct 24 '17 at 11:41

score 0 · Answer 2 · answered Oct 24 '17 at 02:12

what node module you're using? google-maps-api?

geocoder.geocode({address: "someAddress"});

returns a promise or try do this

geocoder.geocode({address: "someAddress"}).then(data => console.log(data));

if it returns undefined then the one causing the problem is the API it self.

if data is not undefined then the geocoder.geocode() part is is not causing the problem

you can try this library Get states of tasks ran by bluebird.all().spread()

for the "double thread" you mention, JavaScript don't support multi thread. you can refer to this link Why doesn't JavaScript support multithreading?

In fact I didnt really understand how promises worked and the 'geocode' function had to be 'promisified' like Jaromanda said. Thanks for your help though :) — Dardena7, Oct 24 '17 at 11:43

angular $q and google.maps.api

2 Answers2