> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Places 連携

> アプリを Google Places に接続して、実世界の場所を簡単に検索、提案、表示できるようにします。

<Info>
  <u>注意</u>: Google Places 連携は Builder ティア以上で利用できます。Free ティアをご利用の場合、バックエンド関数や支払い機能を使用するにはアプリのアップグレードが必要です。
</Info>

***

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

## パート 1: Google 側

すでに Google Places API キーをお持ちの場合は、[****パート 2: Base44 側****](https://docs.base44.com/Integrations/Google-places-integration#part-2%3A-the-base44-side) に進んでください。

<Steps>
  <Step title="Google Cloud でプロジェクトを作成 (または選択)">
    <img src="https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/GoogleCloudConsole.png?fit=max&auto=format&n=UsrMcs9B3MEl2R91&q=85&s=d5b443da6da1f62941411efeee7f7d64" alt="Google Cloud Console Pn" width="1550" height="827" data-path="images/GoogleCloudConsole.png" />

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

  <Step title="Places API (New) を有効化">
    <img src="https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/GoogleAPI.png?fit=max&auto=format&n=UsrMcs9B3MEl2R91&q=85&s=a03ab9df6cb3aaa4c29231d45d882b44" alt="Google API Pn" width="1900" height="855" data-path="images/GoogleAPI.png" />

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

  <Step title="API キーを生成">
    * API の認証情報ページで **Create Key** をクリックしてコピーします。
    * キーを安全な場所に保存します。Base44 に貼り付ける必要があります。
  </Step>
</Steps>

<Tip>
  後で `REQUEST_DENIED` のようなエラーが表示される場合、通常は請求が有効になっていないか、API キーの制限が厳しすぎることを意味します。請求をオンにし、テスト中に制限を緩めると、これは多くの場合解決します。ブラウザでマップを表示する予定がある場合は、**Maps JavaScript API** も有効にし、サイトに制限したブラウザキーを使用してください。
</Tip>

***

## パート 2: Base44 側

Google Places API キーを取得したら、2 つの方法で Base44 に接続できます:

<CardGroup cols={2}>
  <Card icon="sparkle" href="https://docs.base44.com/Integrations/Google-places-integration#option-a%3A-ready-made-integration-create-a-new-app" title="オプション A: Ready-made 連携 (推奨)">
    * ゼロから新しいアプリを始める場合は、こちらの方法を選択してください。
  </Card>

  <Card icon="bolt" href="https://docs.base44.com/Integrations/Google-places-integration#option-b%3A-instant-integration-connecting-to-an-existing-app" title="オプション B: Instant 連携">
    * すでにアプリを構築中で、既存のアプリに Google Places を統合したい場合は、こちらの方法を選択してください。
  </Card>
</CardGroup>

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

<Steps>
  <Step title="連携を選択">
    * Base44 で Integrations をクリックします

          <img src="https://mintcdn.com/base44/oUaRpzSyJvMVshj9/images/Integrations.png?fit=max&auto=format&n=oUaRpzSyJvMVshj9&q=85&s=16ac71b185167177ef260be7c92b0339" alt="Integrations Pn" width="1570" height="652" data-path="images/Integrations.png" />

    * **Google Places** を見つけます

    * **Use this Integration** を選択します
  </Step>

  <Step title="API キーを入力">
    <img src="https://mintcdn.com/base44/UsrMcs9B3MEl2R91/images/GoogleIntegration.png?fit=max&auto=format&n=UsrMcs9B3MEl2R91&q=85&s=896eb0dc8f08cd285bcf6c001068d45d" alt="Google Integration Pn" width="1863" height="809" data-path="images/GoogleIntegration.png" />

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

  <Step title="アプリを構築">
    * 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 が基本構造を構築します。
  </Step>

  <Step title="サンプルの旅行でテスト">
    * 都市を入力し、最大 5 つの場所を検索して、旅行を保存します。
    * 選択したすべての場所のマーカー付きマップが表示され、それらに合わせて自動的にズームすることを確認します。
  </Step>
</Steps>

***

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

アプリが部分的に構築済みで、ゼロからやり直さずに Places を統合したい場合は、このアプローチを使用します。

<Steps>
  <Step title="既存のアプリにアクセス">
    * サンプルアプリを構築するために 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."`
  </Step>

  <Step stepNumber={2} title="AI チャットを使用してアプリを Google Places に接続">
    <img src="https://mintcdn.com/base44/x7uieDiv9xNLARBF/images/TripPlannerApp.png?fit=max&auto=format&n=x7uieDiv9xNLARBF&q=85&s=3eddfdc78ee42b5a7af9fba1e6755bf4" alt="Trip Planner App Pn" width="1889" height="853" data-path="images/TripPlannerApp.png" />

    * アプリを 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.`
  </Step>

  <Step stepNumber={3} title="AI チャットでプロンプトが表示されたら、API キーを貼り付け">
    <img src="https://mintcdn.com/base44/-Vklow6W-uVvNnvR/images/setsecrets.png?fit=max&auto=format&n=-Vklow6W-uVvNnvR&q=85&s=6f96c4ed12b712cbb8ccee93cb0f761d" alt="Setsecrets Pn" width="802" height="522" data-path="images/setsecrets.png" />

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

  <Step stepNumber={4} title="インターフェースを構築">
    * 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.`
  </Step>

  <Step stepNumber={5} title="アプリをテスト">
    * 都市を入力し、アプリに 5 つの場所を提案させて保存します。
    * マーカーが表示され、マップがすべてのポイントに合わせて表示されることを確認します。
    * アプリを更新して、保存した場所が正しくレンダリングされることを確認します。
  </Step>
</Steps>

***

## **トラブルシューティング**

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

## よくあるユースケース

Google のドキュメントや他の Places API プロバイダーの例に基づいて、Base44 アプリで Google Places API を活用するアイデアをいくつか紹介します:

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

これらの例は、Places API を使用して位置情報対応機能、検索ツール、パーソナライズされたおすすめを Base44 アプリに追加するための多くの方法のほんの一部です。

<Note>このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。 </Note>
