@react-google-maps/apiのマーカーのアイコンを表示する方法

目次

１. 問題解決の経緯
２. 開発環境
３. 解決方法
４. 結果
５. おわりに

１. 問題解決の経緯

ググって出てきた方法が悉く通用しなかったので、備忘録として残します。

2. 開発環境

Package	Version
next	14.0.4
react	^18
@react-google-maps/api	2.19.2

3. 解決方法

アイコンのパスをimportして任意の変数に格納します。
そして、MarkerFコンポーネントのiconプロパティに変数.srcを代入します。

page.tsx

import { GoogleMap, MarkerF } from "@react-google-maps/api";
import iconPath from "../../../public/images/icon.png";

const Page = () => {
...
  return (
    ...
    <GoogleMap>
      <MarkerF visible={true} position={...} icon={iconPath.src} />
    </GoogleMap>
    ...
  );
};

4. 結果

以下のように表示されるようになります。（真ん中のやつ）

5. おわりに

たまたまiconプロパティのサジェストから見つけたのでラッキーでした💫

以上です。