How can I get coordinates from Google Places for an array of places and then use the results after all are done?

Viewed 796

I have an array of place names, e.g.:

const places = ['King Square, London', 'Empire State Building', 'Great Wall of China'];

I need a new array of objects with the location set for each element in the array of place names, e.g.:

const places = [
  { name: 'King Square, London', position: { latitude: ..., longitude: ... } },
  ...
];

I would think I have to do something like this:

const places = [];

['King Square, London', 'Empire State Building', 'Great Wall of China'].forEach(placeName => {
  axios
  .get(`https://maps.googleapis.com/maps/api/place/textsearch/json?key=GOOGLE_PLACES_API_KEY&query=${placeName}`)
  .then(response => {
    if (!!response && !!response.results && !!response.results[0]) {
      const searchResult = response.results[0];

      if (!!searchResult) {
        axios
          .get(`https://maps.googleapis.com/maps/api/place/details/json?key=GOOGLE_PLACES_API_KEY&placeid=${searchResult.place_id}`)
          .then(response => {
            const placeResult = response.result;

            if (!!placeResult) {
              places.push({ name: placeName, position: placeResult.geometry.location })

but it doesn't seem to work.

What should it look like such that I can populate places and use the array after it has been populated? Do I have to use Promises to make sure it's populated before using it?

1 Answers
Related