​

ステップごとのセットアップ:

​

パート 1: Google 側

1

Google Cloud でプロジェクトを作成 (または選択)

• Google Cloud Console にアクセスし、既存のプロジェクトを選択するか、新しいプロジェクトを作成します。

2

Places API (New) を有効化

• 左のサイドバーで APIs and Services → Library をクリックします。
• 検索バーで Places API (New) を見つけて開きます。
• プロジェクトで有効化するために Enable をクリックします。

3

API キーを生成

• API の認証情報ページで Create Key をクリックしてコピーします。
• キーを安全な場所に保存します。Base44 に貼り付ける必要があります。

​

パート 2: Base44 側

​

オプション A: Ready-made 連携 (新しいアプリを作成)

1

連携を選択

• Base44 で Integrations をクリックします
• Google Places を見つけます
• Use this Integration を選択します

2

API キーを入力

• プロンプトが表示されたら、GOOGLE_PLACES_API_KEY ラベルのフィールドに Places API キーを貼り付けます。

3

アプリを構築

• AI チャットで、アプリの目的を記述します。
• 例:
  Create an app to plan my next trip. I will tell you the city, you will suggest five places, and you will show them on a Google Places map.
• Base44 の AI が基本構造を構築します。

4

サンプルの旅行でテスト

• 都市を入力し、最大 5 つの場所を検索して、旅行を保存します。
• 選択したすべての場所のマーカー付きマップが表示され、それらに合わせて自動的にズームすることを確認します。

​

オプション B: Instant 連携 (既存のアプリへの接続)

1

既存のアプリにアクセス

• サンプルアプリを構築するために AI チャットに入力したプロンプト:
  "Create an app to plan my next trip. I will tell you the city and you will choose five places for me to visit."

2

AI チャットを使用してアプリを Google Places に接続

• アプリを Google Places に接続するようチャットに依頼します。このサンプルプロンプトを編集できます: Connect this app to Google Places using the Places API (New). Ask me for GOOGLE_PLACES_API_KEY and save it as a Secret. Create backend functions to: - search by text and return id, displayName, formattedAddress, location, types - get details by place_id with the same fields All calls must run from the backend only.

3

AI チャットでプロンプトが表示されたら、API キーを貼り付け

• AI チャットでプロンプトが表示されたら、Update GOOGLE_PLACES_API_KEY をクリックします
• 続いて API キーをポップアップウィンドウに貼り付けます

4

インターフェースを構築

• Trip Planner UI とマップを追加します。
• 次のようなプロンプトでインターフェースを構築できます: Add a Trip Planner page with: - a City field - 5 auto-suggest place inputs powered by the backend When a place is selected, save place_id, name, formatted_address, latitude, longitude, types. Add a Google Map that places a marker for each saved place and automatically fits bounds to show them all. Include a Reset button.

5

アプリをテスト

• 都市を入力し、アプリに 5 つの場所を提案させて保存します。
• マーカーが表示され、マップがすべてのポイントに合わせて表示されることを確認します。
• アプリを更新して、保存した場所が正しくレンダリングされることを確認します。

​

トラブルシューティング

• 403 または REQUEST_DENIED エラー – 通常、Places API が有効になっていない、API キーが間違っている、またはキーの制限が厳しすぎることが原因です。Places API (New) が有効で、請求アカウントが設定されていることを再確認し、テスト中は制限を緩めてください。
• サジェストが空 – 別の都市や検索語を試してください。検索がブラウザではなくバックエンドで実行されていることを確認してください。
• マップがすべてのポイントに合わない – すべてのマーカーがマップに追加された後にアプリが fitBounds を呼び出していることを確認してください。
• 保存されたフィールドが誤り – マップとフィルタが確実に動作するように、上記の正確なフィールド (place_id、name、formatted_address、latitude、longitude、types) を保存してください。

​

よくあるユースケース

• 旅行プランナー – 都市を選んだときにレストラン、観光名所、ホテルを提案。
• ローカルビジネスファインダー – ユーザーが近くのカフェ、店舗、サービスを検索可能に。
• ルートヘルパー – 旅程に沿ったガソリンスタンド、休憩所、飲食店を表示。
• 不動産ツール – 物件の近くにある学校、公園、店舗をハイライト。
• 緊急サービスロケーター – 病院、警察署、薬局をすばやく検索。
• シティガイド – キュレートされたランドマーク、イベント、ライフスタイルスポットを含むアプリを構築。