Next.jsでGoogleMap APIを使用したい

Google Map APIを使用したい

現状は以下のように<Head>タグないに記述し，インポートしています．

<Head>
  <script
    async
    defer
    src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXX&libraries=places"
  ></script>
</Head>

このモジュール中のgoogle.mapsをfunctionの中で使用したいのですが，

google is not defined

になります．

localhostでは使用できるのですが，デプロイ時に上の理由でエラーが発生します．
外部のモジュールを持ってきてそれを変数に代入して使用するというようなことはできないのでしょうか．

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる