Lovable × Google API｜Maps / Calendar / Drive を組み込む

Google APIは「APIキー方式」と「OAuth方式」があり、用途で使い分けます。

APIキー方式(地図表示など)#

• Maps JavaScript API: フロントで利用可、リファラ制限必須
• Geocoding API: サーバー側から呼ぶのが安全

OAuth方式(ユーザーデータ)#

• Calendar / Drive / Gmail: ユーザー同意必須
• リフレッシュトークンをDBに暗号化保存
• Lovable CloudのSecretsにクライアントシークレットを格納

実例ケーススタディ：地図＋翻訳＋カレンダーを1画面に#

観光向けアプリで、Maps JavaScript APIで地図表示／Places APIでスポット検索／Translation APIでレビュー翻訳／Calendar APIで予定追加、を1画面にまとめた例。

• Maps API：フロント用キーは『HTTPリファラ制限＋Maps JavaScript API限定』
• Places / Translation / Calendar：必ずserver function経由でAPIキーを保護
• 課金監視：GCPコンソールで月予算アラートを設定（500円/3,000円/10,000円の3段階）

つまずきポイント集#

• 症状：Maps が灰色のまま → 対処：APIキー制限/有効化APIの両方を確認。Billing有効化必須
• 症状：本番で突然『For development purposes only』表記 → 対処：請求先未設定。BillingアカウントをGCPに紐付け
• 症状：翻訳の品質がバラつく → 対処：『formality=more』『glossary』で固有名詞を保護
• 症状：Calendar API で 401 → 対処：OAuth scope と refresh tokenの保管・再取得フローを実装

よくある質問（検索意図別）#

[実装手順] Q. APIキーをLovableで安全に扱うには？

必ずCloudのシークレットに保存→Edge Function内でDeno.env.get()して呼び出し、フロントには絶対に露出させない。Maps系はリファラ制限、その他はHTTP/IP制限をGCPコンソール側でも併用するのが定石です。

[トラブル解決] Q. 『REQUEST_DENIED』が返ってくる

①該当APIがGCPコンソールで有効化されているか ②キー制限（HTTPリファラ/IP）が厳しすぎないか ③請求アカウントが紐付いているか、の順でチェック。多くは①か③で解決します。