Open5
google map apiを導入
ワッキーgoogle cloudからapikeyを作成し取得する
ワッキーmap読み込み回数に制限をつける
Google Maps Platform では、マップ、ルート、プレイスで使用できる 200 ドル分のクレジットが毎月追加されるので200ドル未満になるように設定する
ワッキーライブラリを使うと簡単に表示できる
npm i -S @react-google-maps/api
ワッキー開発環境ではマップが正常に表示されていたが、本番環境varcelではエラーになってしまう問題の対処方法
varcel側で環境変数を設定する必要がある
上記手順で表示されるようになるがvacelで以下の注意文が表示される
This key, which is prefixed with NEXT_PUBLIC_ and includes the term KEY, might expose sensitive information to the browser. Verify it is safe to share publicly.
NEXT_PUBLIC_が先頭に付き、KEYという用語が含まれるこのキーは、ブラウザに機密情報を公開する可能性がある。公開しても安全であることを確認してください。
apikeyを悪用される可能性があるのでgoogle cloud側でapiに制限を掛ける必要がある、
apiが使えるサイトを制限すればいい
ワッキー課題
初回読み込み時にエラーがでてしまう、何度か再読み込みをすると表示されるが対処方法を探す必要がある。
必ず、アプリケーションに関する情報を使用して OAuth 同意画面を構成してください。と表示されるので対処する必要がある。
google mapを触って現在地からの経路を見れるようにしたい。