Google Maps Platform JavaScript API and Promises

We are pleased to announce that as of the quarterly release of version 3.45 of the Maps JavaScript API, Promises support is now also available in the weekly channel alongside the pre-existing callback pattern for asynchronous methods. Promises provides many benefits such as reducing complexity through convenient syntax and eliminating deeply nested callbacks. The addition of Promises is part of a larger effort to support modern JavaScript programming practices and patterns in the Maps JavaScript API, including support for TypeScript and dynamically loading the Maps JavaScript API.

One convenient feature of Promises is you can now use async await as seen in the following example. With this pattern, an exception will be thrown if the API call was not successful and the Promise was rejected.

const app = async () => {
  const elevationService = google.maps.ElevationService();
  const locations = [{lat: 27.986065, lng:86.922623}];

  const response = await 
elevationService.getElevationForLocation({locations});
  console.log(response.results);
};

app();

Another pattern is usage of the then, catch, and finally methods on the Promise object, which improves error handling. Here, the catch method is explicit and if the Promise is rejected without a catch, an unhandled promise rejection event will be sent to the global scope.

const elevationService = google.maps.ElevationService();
const locations = [{lat: 27.986065, lng:86.922623}];

const promise = 
elevationService.getElevationForLocation({locations});

promise
    .then((response) => {
      console.log(response.results);
    })
    .catch((error) => {
      console.log(error);
    });
    .finally(() => {
      console.log('done');
    });

Finally, the following example demonstrates the existing usage of the callback pattern. Callbacks will continue to be supported, although new asynchronous methods may only support Promises in the future.

const elevationService = google.maps.ElevationService();
const locations = [{lat: 27.986065, lng:86.922623}];

const callback = (results, status) => {
  if (status === 'OK') {
    console.log(results);
  } else {
    // handle this case
  }
};

elevationService.getElevationForLocation({locations}, 
callback);

For a complete list of features with support for Promises check out the Promises documentation for the Maps JavaScript API, where you’ll also find updates as coverage is expanded.

For more information on Google Maps Platform, visit our website.