Google Map with React

koduka

~~以下サイトを参考に、firebaseのエミュレータをDockerで構築する。~~

[追記]
Googleマップを触るだけだから、デプロイする必要がない。
そのため、firebaseのDocker環境を構築する必要なし。

koduka

prettier-plugin-organize-imports は import 文の並び替え、統合、未使用の import 文の削除などをおこなうプラグインです。

pnpm add -D prettier prettier-plugin-organize-imports

@typescript-eslint/eslint-plugin
TypeScript の推奨ルールを提供するプラグイン
@typescript-eslint/parser
TypeScript を解析するためのパーサ
eslint-plugin-tailwindcss
Tailwind CSS のベストプラクティスを提供するプラグインで、クラス名のソートや矛盾するクラスの解消、複数クラスの短縮化などをおこなってくれます
eslint-config-prettier
Prettier と ESLint を併用するための競合ルールを解消する共有設定です

pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-tailwindcss eslint-config-prettier

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.addMissingImports": "explicit",
  },
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.importModuleSpecifier": "non-relative",
}

koduka

google.maps.Markerが非推奨になったので、google.maps.marker.AdvancedMarkerElementを使用しないといけないけど、const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");とPromiseになっており、非同期でクラスを取得しないといけない。

そうなると、サーバーコンポーネント内で取得しないといけないのだが、これがうまくいかない。
page.tsx内でAdvancedMarkerElement取得するようにして、Props経由で渡すようにしたのだが、
Error: google is not definedが発生してどうしたら良いのかわからない状態。

koduka

どうやら、Markerは非推奨というだけで、まだ廃止にはならないようだ。
しかし、いずれ廃止になるだろうと予想。

koduka

解決した！！！
@googlemaps/react-wrapper の<Wrapper />コンポーネントにlibraries={["marker"]} を入れる必要があった。そのため、クライアントコンポーネント側で利用できるので、new google.maps.marker.AdvancedMarkerElementと呼び出してもエラーが出なくなる。

<Wrapper
    apiKey="API_KEY"
    render={render}
    libraries={["marker"]} 
>
    ・・・
</Wrapper>

ウェブページで従来のダイレクトスクリプト読み込みタグを使用している場合は、次のスニペットに示すように、読み込みスクリプトに libraries=marker を追加します。

また、Google Map Platformの[マップ管理]からマップIDを作成して、window.google.maps.MapのオプションにマップIDを渡す必要があった。

koduka

tsconfig.jsonのtypeRootsはデフォルトでnode_modules/@typesを含んでいるので、
わざわざ、明記する必要はない。

デフォルトでは、表示されている "@types" パッケージはすべてコンパイルに含まれます。node_modules/@typesに含まれるパッケージは、任意のフォルダーに囲まれている場合、可視とみなされます。例えば、./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/ などにあるパッケージを意味します。

koduka

drawing: 地図上にポリゴン、矩形、ポリライン、円、マーカーを描画するためのグラフィカルユーザーインターフェースを提供します。詳しくは、描画ライブラリのドキュメントをご覧ください。

geometry: 地表面上のスカラー幾何学値（距離、面積など）を計算するユーティリティ関数が含まれます。詳しくは、ジオメトリライブラリのドキュメントをご覧ください。

journeySharing: Google Maps Platform の運輸と物流のソリューションに関するサポートを利用できるようになります。

localContext: 指定された場所の付近にある、ユーザーとの関連性が高い重要なスポットを表示します。詳しくは、ローカルコンテキストライブラリのドキュメントをご覧ください。

marker: カスタマイズ性とパフォーマンスに優れる「高度なマーカー」を地図に追加できます。詳しくは、高度なマーカーのドキュメントをご覧ください。

places: 一定の範囲に存在する施設、地理的位置、有名なスポットなどを、アプリケーションで検索できるようにします。詳しくは、プレイスライブラリのドキュメントをご覧ください。

visualization: データを視覚的に表現するヒートマップを提供します。詳しくは、可視化ライブラリのドキュメントをご覧ください。

koduka

Google Map API Keyのアプリケーション制限をWebサイトにし、localhost:3000にすれば、ローカルからのアクセスだけ許可することができた。
また、API の制限は、Maps JavaScript APIだけ許可すれば良いと思う。