Ticker

6/recent/ticker-posts

Header Ads Widget

Google Maps Platform の JavaScript API と Promise


この記事は 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 Team 


source https://developers-jp.googleblog.com/2021/07/google-maps-platform-javascript-api.html

Post a Comment

0 Comments