この記事は Google Maps Platform チームによる Google Cloud Blog の記事 “Google Maps Platform JavaScript API and Promises” を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
四半期毎のリリースで更新された Maps JavaScript API のバージョン 3.45 並びに、Weekly リリースの最新バージョンにおいても、非同期メソッドの既存のコールバック パターンに加えて、Promise もサポートされるようになりました。Promise は便利な構文による複雑さの軽減や深く入れ子になったコールバックの排除など、多くの利点をもたらします。今回の Promise の追加は、TypeScript のサポートや Maps JavaScript API の動的な読み込みといった、Maps JavaScript API で最新の JavaScript プログラミング手法やパターンをサポートするうえでの、大きな取り組みの一環となります。
以下の例で示すように、Promise の便利な機能の一つである、async / await を使用することができます。この機能を利用すると、API 呼び出しが成功せず、Promise が拒否された場合に例外が発生します。
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();
次のパターンは、Promise オブジェクトの then、catch、finally メソッドを使用するもので、エラー処理を改善します。ここでは、catch メソッドが明示されていて、catch なしで Promise が拒否された場合には、未処理の promise 拒否イベントがグローバル スコープに送信されます。
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’);
});
最後に、以下の例は、既存のコールバック パターンの使用法を示しています。今後、新しい非同期メソッドは Promise のみをサポートする可能性がありますが、コールバックは引き続きサポートされる予定です。
const elevationService = google.maps.ElevationService();
const locations = [{lat: 27.986065, lng:86.922623}];
const callback = (results, status) => {
if (status === ‘OK’) {
console.log(results);
} else {
// このケースを処理する
}
};
elevationService.getElevationForLocation({locations},
callback);
Promise をサポートしている機能の一覧については、Maps JavaScript API の Promise のドキュメントをご覧ください。こちらの内容は、今後の機能拡張に合わせて更新されますので、定期的に確認することをおすすめします。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
Posted by 丸山 智康 (Tomoyasu Maruyama) – Developer Relations Engineer