《Bubble》独自ドメインでGoogleマップと連携する方法
概要
Bubbleで独自ドメインを用いる場合、Googleマップと連携する方法について解説します。
📌独自ドメインを使用しない場合はAPIキーを取得する必要はありません。
BubbleでGoogle Mapsとの連携を行うには、Google Maps APIを使用する必要があります。
Google Maps APIを使用するためにGoogle Cloud ConsoleでAPIキーを取得する必要があります。
APIキーを取得するには、以下の手順を実行します。
独自ドメインで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から確認してみてください。
