google map上にピンを立てたいので調査
yuto-mGoogle Maps Platformっていうサービスを使えばgoogle mapをプログラムで操作できそう。
毎月200ドルまで無料枠があるぽい。
GCPの無料枠とは別に毎月200ドルぽい。
マーカーを表示させるだけならMaps Embed APIが無料で使える。
やりたいことはほぼこれなので、APIキーがなくてもできそう。 現在はapiキーなしでMaps Javascript APIを使用できないので、APIキーは必須。参考
yuto-m下記あたりを読む
yuto-mGoogle Maps Platformを利用開始すると使用料アラートがクレジット分で任意選択できるの良いな。安心感ある。
yuto-mブートストラップローダーが推奨ぽいけど、nextでindex.htmlない気がするのでJS APIローダーっていう方法でやるのが正解？
https://developers.google.com/maps/documentation/javascript/overview?hl=ja&_gl=11oleor8_gaNTk1ODc3NTg2LjE3MDIxMjg1OTc._ga_NRWSTWS78N*MTcwMjY5NDgzOC40LjEuMTcwMjY5NTcwMi4wLjAuMA..#bootstrap_loader
yuto-mreactでやる場合はそもそもそれ用のpackageを使う必要があるぽい。
理解したわ。
yuto-m色んなサンプル見るとapi keyをNEXT_PUBLICしてるけど、隠さなくて良いんだろうか。 -> apiキーは公開しつつ、制限かけて上限設定して何とかしてねっていう感じぽい。参考
react-wrpperでやる方法地味にハマったのでgoogle-map-reactを使うことにしたら表示はできた。
reactでgoogle map表示させるためのpackageは結構種類があるぽい。
@ react-google-maps/api が一番人気だから、そっちも検討する。
yuto-mAPIキーは公開されるので、下記のベストプラクティスに沿ってなるべく不正利用されづらい環境を作るのが良いらしい。