【Bubble】独自ドメインでGoogleマップとの連携方法
BubbleでGoogleマップと連携する方法について解説します。
概要
BubbleでGoogle Mapsとの連携を行うには、Google Maps APIを使用するには、Google Cloud ConsoleでAPIキーを取得する必要があります。
APIキーを取得するには、以下の手順を実行します。
Google Cloud ConsoleでGoogle Maps Javascript APIキーを取得する
以下の手順を実行します。
1.Google Cloud Consoleにログインします。
2.[プロジェクトを作成]をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/01スクリーンショット-2022-12-27-23.13.03.png)
3.プロジェクト名を入力し、[作成]をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/02新しいプロジェクト_–_Google_Cloud_コンソール.png)
4.[APIとサービス]から、[ライブラリ]タブをクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/03スクリーンショット-2022-12-27-23.20.46.png)
5.「Maps Javascript API」と「Google Geocode API」を検索し、[有効にする]をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/04スクリーンショット-2022-12-27-23.23.07.png)
ℹ️ 請求アカウントが事前に設定する必要があります。 有効な請求アカウントがない場合、作成をしてください。
![](https://swooo.net/wp-content/uploads/2023/03/05スクリーンショット-2022-12-27-23.26.40.png)
6.[認証情報]をクリックし、[認証情報を作成]をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/06スクリーンショット-2022-12-27-23.36.50.png)
7.[APIキー]を選択し、[APIキーを作成]をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/07スクリーンショット-2022-12-27-23.38.28.png)
8.APIキーが表示されるので、「Maps Javascript API」と「Google Geocode API」のAPIキーをそれぞれメモしておきます。
![](https://swooo.net/wp-content/uploads/2023/03/08スクリーンショット-2022-12-27-23.38.50.png)
APIキーを取得したら、BubbleでGoogle Maps APIを使用する準備ができました。
認証情報の設定
BubbleアプリのEditorページを表示し、Settings>Generalタブの「General services API keys」欄にメモしたAPIキーを貼り付けます。
![](https://swooo.net/wp-content/uploads/2023/03/09スクリーンショット-2022-12-27-23.51.45.png)
地図の表示を確認する
これでBubbleアプリ上でGoogle Mapが正常に表示されます。テスト用にmapエレメントを配置して、Previewから確認してみてください。
![](https://swooo.net/wp-content/uploads/2023/03/10スクリーンショット-2022-12-27-23.59.46.png)