《Bubble》独自ドメインでGoogleマップと連携する方法

Google Cloud ConsoleでAPIキーを取得する

１．Google Cloud ConsoleでGoogle Maps Javascript APIキーを取得する

Google Cloud Consoleにログインし、ダッシュボードから[プロジェクトを作成]をクリックします。

プロジェクト名を入力し、[作成]をクリックします。

[APIとサービス]から、[ライブラリ]タブをクリックします。

「Maps Javascript API」と「Google Geocode API」を検索し、[有効にする]をクリックします。

📌請求アカウントを事前に設定する必要があります。 有効な請求アカウントがない場合作成をしてください。

[認証情報]をクリックし、[認証情報を作成]をクリックします。

[APIキー]を選択し、[APIキーを作成]をクリックします。

APIキーが表示されるのでメモしておきます.

APIキーを取得したら、BubbleでGoogle Maps APIを使用する準備ができました。

２．認証情報の設定

BubbleアプリのEditorページを表示し、Settings>Generalタブの「General services API keys」欄にメモしたAPIキーを貼り付けます。

３．地図の表示を確認する

これでBubbleアプリ上でGoogle Mapが正常に表示されます。テスト用にmapエレメントを配置して、Previewから確認してみてください。